Section 11.5. DOM Builder

11.5. DOM Builder

Defined in builder.js, which is not included in the default Rails skeleton.

Builder.node( elementName[, attributes][, children] )

Creates a DOM element with the tag name elementName. Element attributes can be specified in an optional attributes argument. The optional children argument can be one or more elements to be appended as children of the new node. If children (or one if its elements, if it's an array) is plain text or numeric, it will be automatically appended as a text node.

element = Builder.node('p', {className:'green'},              'Here is a green paragraph.'); document.body.appendChild(element);

That example will create a new paragraph element like this (note that, due to browser inconsistencies, the className attribute should be used to set the CSS class, instead of class):

<p >Here is a green paragraph.</p>

Using children, calls to Buider.node( ) can be nested, as in this example:

element = Builder.node('div', {id:'my_div', className:'box'}, [   Builder.node('div', {style:'font-size:11px'}, [     "text",      1,      Builder.node('ul', [       Builder.node('li', {className:'active', onclick:"alert('hi')"}, 'Item')     ]),   ]), ]); document.body.appendChild(element);

Tables can be created, as well:

$('my_div').appendChild(   Builder.node('table', { width:'100%', border:'1'}, [     Builder.node('tbody', [       Builder.node('tr', {className:'header'}, [         Builder.node('td', [ Builder.node('strong', 'Table Cell')])       ])     ])   ]) );

Note that the TBODY element is required in dynamically created tables.