Builder

Use Builder to easily create DOM elements dynamically.

Availability

script.aculo.us V1.5 and later.

Synopsis

Builder.node( elementName )

Builder.node( elementName, attributes )

Builder.node( elementName, children )

Builder.node( elementName, attributes, children )

· | elementName string The tag name for the element.

· | attributes object Typical attributes are id, className, style, onclick, etc.

· | children array List of other nodes to be appended as children.

If an element of the children array is plain text or numeric, it will be automatically appended as a text node.

Instead of an array, children can also be a Java Script String or numeric, to ease usage.

Special cases

· | class: When specifying the class attribute for the node, use className to circumvent a Firefox bug.

· | for: To set a for attribute (in labels) use htmlFor, since ‘for’ is a reserved word in javascript.

Examples

Creating TR and TD elements

table = Builder.node('table', {width:'100%',cellpadding:'2',cellspacing:'0',border:'0'});

tbody = Builder.node('tbody');

tr = Builder.node('tr',{className:'header'});

td = Builder.node('td',[ Builder.node('strong','Category')]);

tr.appendChild(td);

tbody.appendChild(tr);

table.appendChild(tbody);

$('divCat').appendChild(table);

You can also combine them but you need to make sure you create the tbody tag or it will not work in IE. I have tested this in FF 1.5 and IE 6. I dont have access to other browsers. The one problem that I have found is that with TR and TD elements you can not put a style tag on them as it just makes IE stop doing the Builder Function.

Simple Example

var element = Builder.node('p',{className:'error'},'An error has occurred');

creates following element:

<p class="error">An error has occured</p>

Complex Example

element = Builder.node('div',{id:'ghosttrain'},[

Builder.node('div',{className:'controls',style:'font-size:11px'},[

Builder.node('h1','Ghost Train'),

"testtext", 2, 3, 4,

Builder.node('ul',[

Builder.node('li',{className:'active', onclick:'test()'},'Record')

]),

]),

]);

creates (without newlines):

<div id="ghosttrain">

<div class="controls" style="font-size:11px">

<h1>Ghost Train</h1>

testtext234

<ul>

<li class="active" onclick="test()">Record</li>

</ul>

</div>

</div>

Usage

In javascript code, if you want to use your new element, you can add it to an existing dom element by calling

$('myExistingDomElement').appendChild(element);

If you want to be able to call any of prototype’s extension-methods on the created node, then you need to pass it through the $() function:

var new_el = Builder.node('div',{id:'some_id'});

new_el = $(new_el);

new_el.hide();