Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

117 lines (78 sloc) 2.949 kB


A DOM constructor. Because sometimes you're just wantn' something simple.

Designed for quick DOM node construction. Compare it to Builder

Inspired by how I used to use jquery-haml.

Doml works as native Javascript (i.e., require it into your node app), in the browser (i.e., use it in a <script> tag), and as an Ender library component (i.e., works in the $() chain).

It works like this as native Javascript:

doml = new Doml();
el = doml.create('script', {src:''});

Set attributes:

elem = doml.create('input', 'input', {type:'checkbox', checked: true});

Decorate with CSS attributes:

elem = doml.create('p', 'hello', {css: "color:red; border:2px solid green;"});
Set attributes:

Embed other DOM nodes:

elem = doml.create('div', 'text1', ['p', 'p-text'], 'text2', ['span', 'span-text']);

Adaptive generation (pseudo-templating) with runtime computed args:

elem = doml.create('div', function (args) {
    var elems = [];
    elems.push(doml.create('p', args.text1));
    elems.push(doml.create('span', args.text2));
    return elems;
}, {text1: 'text1', text2: 'text2'});

See the tests for usage patterns, and how to use natively, in browser, and with Ender.


npm install doml

Ender integration

If you don't already have Ender (an npm package) install it now (and don't look back)

$ npm install ender -g

To combine Doml to your Ender build, you can add it as such:

$ ender build doml[,modb, modc,...]

or, add it to your existing ender package

$ ender add doml

Use it like this:

// create an Ender element set
enderSet = $.doml('div', 'hello');

// clone an element to create an Ender element set
elem = document.getElementById('the-span');
enderSet = $.doml(elem);

// chain
body = document.getElementsByTagName('BODY')[0];
$(body).doml('div', 'hello');  // appends new DIV (with text "hello" to BODY)

// construct and append a DOM sub-tree
$(body).doml('div', ['p', 'hello', {id: "p-hello"}], ['span', 'there', {css: "color:red;"}]);
$(body).doml('div', $.doml('p')[0], $.doml('span')[0]);

Doml does not require that Bonzo be in your Ender lib. (But that doesn't mean you shouldn't use it.)


If you want to build from src:

npm run-script boosh


Test native: $ node test/tests.js

Test in browser: point your browser to test/test.html

Test in browser with Ender: point your browser to test/ender-test.html


Make Doml AMD compatible


Jump to Line
Something went wrong with that request. Please try again.