node package manager

domjs

DOM template engine for client and server

domjs

Build dom structure easy way with plain JavaScript. Can be used on both client and server side.

$ npm install domjs

To port it to Browser or any other (non CJS) environment, use your favorite CJS bundler. No favorite yet? Try: Browserify, Webmake or Webpack

What would be the easiest, most intuitive way to build html5 DOM tree with plain JavaScript ?

var mytemplate = function () {
  header(
    h1('Heading'),
    h2('Subheading'));
 
  nav(
    ul({ 'class': 'breadcrumbs' },
      li(a({ href: '/' }, 'Home')),
      li(a({ href: '/section/'}, 'Section')),
      li(a('Subject'))));
 
  article(
    p('Lorem ipsum...'));
 
  footer('Footer stuff');
};

This is how templates for domjs can be written.

Plain domjs usage example:

var domjs = require('domjs')(document);
 
var ns = domjs.ns;
var dom = domjs.collect(function () {
    ns.header(
    ns.h1('Heading'),
    ns.h2('Subheading'));
 
  ns.nav(
    ns.ul({ 'class': 'breadcrumbs' },
      ns.li(a({ href: '/' }, 'Home')),
      ns.li(a({ href: '/section/'}, 'Section')),
      ns.li(a('Subject'))));
 
  ns.article(
    ns.p('Lorem ipsum...'));
 
  ns.footer('Footer stuff');
});
 
document.body.appendChild(dom); // Insert generated DOM into document body 

To use domjs functions literally as in first example, you will need to prepare dedicated function wrapper (either programmatically or manually) as e.g. following:

var myTemplate = (function () {}
  var article = ns.article, footer = ns.footer, h1 = ns.h1, h2 = ns.h2
    , header = ns.header, li = ns.li, nav = ns.nav, p = ns.p, ul = ns.ul;
  return function () {
      header(
      h1('Heading'),
      h2('Subheading'));
 
    nav(
      ul({ 'class': 'breadcrumbs' },
        li(a({ href: '/' }, 'Home')),
        li(a({ href: '/section/'}, 'Section')),
        li(a('Subject'))));
 
    article(
     p('Lorem ipsum...'));
 
    footer('Footer stuff');
  };
}());
var dom = domjs.collect(myTemplate);

You can save references to elements and operate on them later:

var myul = ul(li('one'), li('two'), li('three'));
 
// ... some code ... 
 
// add extra items to myul 
myul(li('four'), li('five'));
 
// append myul into other element 
div(myul);

You can access DOM elements directly, just invoke returned function with no arguments

(myul() instanceof DOMElement) === true

Comment type nodes:

_comment('my comment');

CDATA type nodes

_cdata('cdata text');

Text nodes in main scope:

_text('my text');

Elements with names that are reserved keywords in JavaScript language, like 'var', should be created with preceding underscore added to its name:

_var('var content');

Tests

$ npm test