Laconic

Laconic offers an intuitive approach to generating DOM content in JavaScript. The source code is available on GitHub.

Consider the code necessary to produce a simple table hierarchy with the standard DOM API:

var firstTh = document.createElement('th');
firstTh.appendChild(document.createTextNode('first name'));
var secondTh = document.createElement('th');
secondTh.appendChild(document.createTextNode('last name'));
var firstTr = document.createElement('tr');
firstTr.appendChild(firstTh);
firstTr.appendChild(secondTh);
var firstTd = document.createElement('td'); 
firstTd.appendChild(document.createTextNode('Joe'));
var secondTd = document.createElement('td'); 
secondTd.appendChild(document.createTextNode('Stelmach'));
var secondTr = document.createElement('tr');
secondTr.appendChild(firstTd);
secondTr.appendChild(secondTd);
var table = document.createElement('table');
table.appendChild(firstTr);
table.appendChild(secondTr);
document.body.appendChild(table);

This code is beyond verbose, which makes determining the resulting hierarchy difficult. Let's take a look at the laconic way to generate the same table:

$.el.table(
  $.el.tr(
    $.el.th('first name'),
    $.el.th('last name')),
  $.el.tr(
    $.el.td('Joe'),
    $.el.td('Stelmach'))
).appendTo(document.body);

Laconic adds a method to the $.el namespace for all known HTML Elements. These methods should be invoked with a variable-length list of child elements, strings, numbers, or arrays containing these types. An optional attributes object may be passed as the first argument. For example:

$.el.div({'class' : 'example'}, 
  $.el.div('content'));

will produce the following structure:

<div class='example'>
  <div>content<div/>
</div>

If you're working with non-standard elements, $.el may be invoked directly with the element name as the first parameter. The following will produce the same result as above:

$.el('div', {'class' : 'example'},
  $.el.div('content'));

If you have a particular hierarchy of elements you'll be generating frequently, you may want to register them as a custom element. Your element will need a name and a function that appends content to 'this', which is a reference to the root node. For example:

$.el.registerElement('element', function(one, two) {
  this.appendChild($.el.div(one));
  this.appendChild($.el.div(two));
});

Once you've registered an element, you can start inserting it:

$.el.element('first', 'second').appendTo(document.body);

This particular invocation will produce the following structure:

<div class='element'>
  <div>first</div>
  <div>second</div>
</div>