Introducing DOMBuilder • Flailing Wildly

The DOM

I hate the DOM. Actually, I take that back. I love the DOM, but I hate the fact that generating DOM nodes in JavaScript is so verbose and unintuitive.

You need to construct a new element, then add properties, then construct a child element, then add properties, then append the child to the parent, and the parent to whatever DOM object you want that’s already in the page.

A few years ago I discovered Builder.node(), a component of Scriptaculous. The problem is that Scriptaculous relies on Prototype, and both are HUGE JavaScript libraries. Later I moved to Moo.fx/MooTools, then I didn’t do much JavaScript for a while, then I started doing a lot with YUI, while sprinkling a little jQuery around here and there. None of these other frameworks had an equivalent to Builder.node(), and again, that sucks.

So last night, I wrote a small JavaScript class to handle this very thing. Introducing DOMBuilder. DOMBuilder is small, fast, and doesn’t depend on any other JavaScript frameworks meaning that it’s easy to use in any project where you need to construct nested DOM elements.

The fully commented debug version clocks in around 3k. The minified version is 739 bytes. With gzip compression, it squeezes down to a mere 393 bytes. It’s not quite as terse or elegant as I’d like (yet), but it’s a good result for about 2 hours of hacking.

Examples

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>
    </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_link.appendChild(control_label);
control_div.appendChild(control_link);
document.body.appendChild(control_div);

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

var _ = DOMBuilder;
document.body.appendChild(_('div', { class:'location_select_control' }).child(
    _('a', { href:'', class:'location_select_label' }).child(
        _('label').innerHTML('This is my label')
    )
).asDOM());

Download

This code is BSD licensed, so feel free to use it in personal or commercial projects. You can download it from GitHub.