domjs
Client and server side dom template engine
Build dom structure easy way with plain JavaScript. Can be used on both client and server side.
Installation
$ 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
Usage
What would be the easiest, most intuitive way to build html5 DOM tree with plain JavaScript ?
var { ; ; ; ;};
This is how templates for domjs can be written.
Plain domjs
usage example:
var domjs = document; var ns = domjsns;var dom = domjs; documentbody; // 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 = {} var article footer h1 h2 header li nav p ul = ns; return { ; ; ; ; };};var dom = domjs;
Other notes
You can create custom elements:
var myCustomElement = domjsnsmyCustomElement = domjsnselement;
Optionally you may also provide some custom constructor or methods for that element:
// This has to be defined before any `my-custom-element` is created by domjs'my-custom-element' = {} { ... };
You can save references to elements and operate on them later:
var myul = ; // ... some code ... // add extra items to myul; // append myul into other element;
You can access DOM elements directly, just invoke returned function with no arguments
instanceof DOMElement === true
Comment type nodes:
;
CDATA type nodes
;
Text nodes in main scope:
;
Elements with names that are reserved keywords in JavaScript language, like 'var', should be created with preceding underscore added to its name:
;
Tests
$ npm test