Domla

Wrapper around dom element creation, making dom nodes in javascript less verbose and more declaritive.

Uh Why?

This is not meant to replace your templating engine. This is meant to help with times templating engines, or html is not available, like in a browserify ui component. Eg.

var buttons = document . createElement ( ' div ' ) , use = document . createElement ( ' button ' ) , cancel = document . createElement ( ' button ' ) ; buttons . className = ' button-group ' ; use . textContent = ' use ' ; cancel . textContent = ' cancel ' ; buttons . appendChild ( use ) ; buttons . appendChild ( cancel ) ; use . addEventListener ( ' click ' , onUse ) ; cancel . addEventListener ( ' click ' , onCancel ) ; var dom = require ( ' domla ' ) , div = dom . div , button = dom . button , buttons ; buttons = ( div ( { className : ' button-group ' } , button ( { onClick : onUse } , ' use ' ) , button ( { onClick : onCancel } , ' cancel ' ) ) ) ;

Usage

Domla has a ton of methods. Pretty much all of which are tagNames of elements. See available. Eg.

var dom = require ( ' domla ' ) , div = dom . div ; div ( ) ;

To add attributes pass in an object as the first argument.

div ( { className : ' foo ' , style : ' box-sizing: border-box; ' , onClick : onFooClick } ) ;

Important to note that you should use className rather then class because class is a reserved word in javascript.

Next you might want to string multiple elements together.

div ( { } , span ( ) ) ;

This allso works with text

span ( { } , ' hello world ' ) ; span ( ' hello world ' ) ;

Everything together makes some cool looking javascript

var el = ( div ( { className : ' foo ' } , span ( ' hello world ' ) ) ) ; document . body . appendChild ( el ) ;

Have fun with it and file any bugs you find.