mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Jwee API > Wee.elem - Element Functions

wee.elem create(...)
create?
create(...)
create(...)
createFromHTML(...)
addMethods(...)
absoluteCenter()

The wee.elem toolkit contains just a couple functions doing with elements. Most importantly, it provides a function to easily create new elements.

function wee.elem.create(...)( string tag,  [object attributes] ,  [string css] ,  [element parent] )
(Usage 1)  Create a new HTML element on the fly.
Args
  1. {string} The tag name (such as “div”), with optional ID (“div#mydiv”) or class added (“div.box”)
  2. (optional) {object} object containing properties to set
  3. (optional) {string} valid string of CSS code
  4. (optional) {element} where to append new element
Returnsthe new element
NotesArguments 2 and 3 are reversable.

This is how you can create new HTML elements from code.

Make a new <DIV>. 

wee.elem.create( "div" );

Make a new <DIV> with a #id. 

wee.elem.create( "div#pageheader" );

Make a new <DIV> of a particular CSS class. 

wee.elem.create( "div.bigblueboxr" );

Make a new <DIV> element that has a blue border. 

wee.elem.create( "div", "border:1px solid blue" );

Make a new <DIV> element, and add it to the page, on <BODY>. 

wee.elem.create( "div", Dom.body() );
// OR LIKE
Dom.body().append( wee.elem.create( "div" ) )

Make a new <INPUT> element that is a text box and with name of login. 

wee.elem.create( "input", {name:"login", type:"text"} );

Make a new <INPUT> element that is a text box and with name of login, and has font-size of 20px. 

wee.elem.create( "input", {name:"login", type:"text"}, "font-size:20px;" );

Make a new <INPUT> element that is a text box and with name of login, and add it to a form on the page. 

wee.elem.create( "input", {name:"login", type:"text"}, document.forms["loginForm"] );
// OR LIKE THIS
wee.elem.create( "input", {name:"login", type:"text"}).appendTo( $("loginForm") );

??? create?

Blah blah

function wee.elem.create(...)( element elementToCopy )
(Usage 4)  Create a new element just like the elementToCopy
Args
  1. {element} Element to copy
Returnsthe new element

There are many more examples, but this is a start. wee.elem.create(...) aims to provide you shortcuts for common things.

function wee.elem.create(...)( string html,  [parent / attributes / css . . . ] )
(Usage 3)  Create a new element from an snippit of HTML
Args
  1. {string} A string of raw HTML
Returns{element} The new element

Creating a new HTML element from raw HTML can be easier sometimes. The code below demonstrates that, and then appends the new DIV to the end of the BODY 

Elem.create('< div id="myDiv" style="background:black;">My New DIV< /div >', Dom.body() );
function wee.elem.createFromHTML(...)( string html )
Create new element from straight HTML code.
Args
  1. {string} Just plain HTML
Returns{element} A reference to the new element, not yet appended to the page.
Examplevar ele = Elem.createFromHTML('<div class="left"><img src="image.png" border=0></div>');
function wee.elem.addMethods(...)( object methods )
Extend HTML elements with new methods. Uses DOM extensions if supported.
Args
  1. An object containing functions
AdvancedThis is a advanced level function.
function wee.elem.absoluteCenter()
Positions the element in the absolute center of the page, taking element dimensions and page scroll into consideration.

Discussion on /learn/api/element




Zacko 11/05/14 :  

Actually...i just didnt realize you had to pass the literal handler function to the .add() method. I figured it was a string. XD Opps


Zacko 11/05/14 :  

Actually its Event.getOwner() thats not working


Zacko 11/05/14 :  

wee.event.add doesn't seem to be working for me. Error: u.apply is not a function. any ideas?


Jwee Ninja 11/05/14 :  

@Xymon: Release date: to be determined


Jwee Ninja 11/05/14 :  

@Xymon: It might be complex to a n0ob. But if you know JS or Java then PHP is babytalk.