Introducing DOMBuilder

Projects and Code337 words2 minutes to read

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.


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>

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";

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')


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

Ryan Parman

Ryan Parman is an experienced software engineer, open source evangelist, and passionate user advocate currently living in Seattle. He is the creator of and , and worked on DevOps and Security at . He is now bringing learning into the digital age as an Engineering Lead and Site Reliability Engineer at . Ryan's aptly-named blog, , is where he writes about ideas longer than .