DOMBuilder

• © Ryan Parman – http://ryanparman.com/labs/
• BSD Licensed – http://creativecommons.org/licenses/BSD/
• Tested in Firefox 3/3.5, Safari 3/4, IE 6/7/8

Usage

Here’s the HTML we want to generate:

<div class="location_select_control">
    <a href="" class="location_select_label">
        <label>This is my label</label>
        <label>This is another label</label>
    </a>
</div>

Here is how we’d do it with the standard DOM:

control_div = document.createElement('div');
control_div.className = "location_select_control";

control_link = document.createElement('a');
control_link.href = "";
control_link.className = "location_select_label";

control_label = document.createElement('label');
control_label.innerHTML = "This is my label";

control_label2 = document.createElement('label');
control_label2.innerHTML = "This is another label";

control_link.appendChild(control_label);
control_link.appendChild(control_label2);
control_div.appendChild(control_link);

document.body.appendChild(control_div);

Lastly, here’s how we’d do it with DOMBuilder:

// Create a shortcut
var $dom = function(elem, attr) { return new DOMBuilder(elem, attr); };

document.body.appendChild(
    $dom('div', { 'class':'location_select_control' }).child(
        $dom('a', { 'href':'', 'class':'location_select_label' }).child([
            $dom('label').innerHTML('This is my label'),
            $dom('label').innerHTML('This is another label')
        ])
    ).asDOM()
);

API

I wanted to make DOMBuilder as chainable as possible. All methods return this except for the asDOM() and asHTML() methods.

DOMBuilder(elem, attr) – Constructor

DOMBuilder generates DOM nodes with an object-oriented syntax.

Parameters

• elem – {String} (Required) The name of the element to generate.
• attr – {Hash} (Optional) A JSON Hash of the attributes to apply to the element.

Returns

• DOMBuilder – The original DOMBuilder object.

child(obj) – Method

Append one or more child nodes.

Parameters

• obj – {HTMLElement | DOMBuilder | Array} (Required) A DOM element, a DOMBuilder object, or an array of these for multiple children.

Returns

• DOMBuilder – The original DOMBuilder object.

innerHTML(text) – Method

Set a value via innerHTML.

Parameters

• str – {String} (Required) The string to assign via innerHTML.

Returns

• DOMBuilder – The original DOMBuilder object.

appendHTML(text) – Method

Append to a value via innerHTML.

Parameters

• str – {String} (Required) The string to append via innerHTML.

Returns

• DOMBuilder – The original DOMBuilder object.

asDOM() – Method

Return the DOM element for DOMBuilder that can be used with standard DOM methods. This is optional when passed into a DOMBuilder.child() method. This is required as the last method in the chain when passing to a native DOM method.

Returns

• HTMLElement – The entire DOMBuilder object as a DOM node.

asHTML() – Method

Return the DOMBuilder object as an HTML string.

Returns

• String – The entire DOMBuilder object as a string of HTML.