domla
v0.2.1
Published
wrapper around dom element creation, making dom nodes in javascript less verbose an more declaritive
Downloads
7
Readme
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.
// before
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 );
// with domla
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(); // < DIV > element
To add attributes pass in an object as the first argument.
div( { className: 'foo', style: 'box-sizing: border-box;', onClick: onFooClick } );
// <div class="foo" style="box-sizing:border-box;"></div> plus a event listener
Important to note that you should use
className
rather thenclass
becauseclass
is a reserved word in javascript.
Next you might want to string multiple elements together.
div( {}, span() ); // appends span to div
This allso works with text
span( {}, 'hello world' );
// or
span( 'hello world' );
Everything together makes some cool looking javascript
var el = (
div( { className: 'foo' },
span( 'hello world' )
)
);
// add it to the page
document.body.appendChild( el );
Have fun with it and file any bugs you find.