DOMBuilder

See the demo, read the documentation, view the source, compare performance, or convert some code.

It's highly recommended that you use a browser with Firebug-like capabilities so you can view the HTML that's being generated.

Some of the examples below use _.map() from the Underscore.js toolkit, as well as my fork containing _.splitBy().

Demo: Mixing and matching

This will show a good cross-section of functionality for generating DOM nodes.

HTML to generate

<div id="test" class="sample">
    <p>This is a <a href="">sample of the code</a> that you may like.</p>
    <p>And another <a href="#"><strong>complex-ish</strong></a> one.</p>
    <ul class="sample">
        <li><a href="http://google.com">One</a></li>
        <li><em>Two</em></li>
        <li><strong>Three</strong></li>
    </ul>
</div>

DOMBuilder code

See it in action

(Rendered in milliseconds)

Demo: Simple list with data source

This will show how to generate a simple list using an initial data source of list items to create.

HTML to generate

<div>
    <p>Adding similar nodes with a for loop.</p>
    <ul id="list">
        <li><a href="#one">one</a></li>
        <li><a href="#two">two</a></li>
        <li><a href="#three">three</a></li>
        <li><a href="#four">four</a></li>
        <li><a href="#five">five</a></li>
    </ul>
</div>

DOMBuilder code

See it in action

(Rendered in milliseconds)

Demo: Complex table with data source

This will show how to generate a table using an initial data source of list items to create, and doing the math to group the items into the table columns. Uses nested anonymous functions.

Here, we're passing multiple objects into .DOM() as an array.

HTML to generate

<p>A table, generated programmatically with nested anonymous callbacks, from data.</p>
<table width="20%" border="1">
    <thead>
        <tr>
            <th>col-1</th>
            <th>col-2</th>
            <th>col-3</th>
            <th>col-4</th>
            <th>col-5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell-1</td>
            <td>cell-2</td>
            <td>cell-3</td>
            <td>cell-4</td>
            <td>cell-5</td>
        </tr>
        <tr>
            <td>cell-6</td>
            <td>cell-7</td>
            <td>cell-8</td>
            <td>cell-9</td>
            <td>cell-10</td>
        </tr>
        <tr>
            <td>cell-11</td>
            <td>cell-12</td>
        </tr>
    </tbody>
</table>

DOMBuilder code

See it in action

(Rendered in milliseconds)

Legalese

DOMBuilder is copyright © 2009 Ryan Parman, and released under the open-source New BSD License.