dommy.js

Dommy (pronounced dom-me) makes is a javascript function that makes it a gazillion times easier to build DOM elements in javascript without using the insecure and ill-performant innerHTML.

Get started

npm

You can add dommy.js to your project by either using npm by running the command npm install dommy.js --save

If you installed dommy using npm, you can start using dommy by

    var dommy = require('dommy.js');

script tag

You can add dommy.js by downloading the latest release from the releases page.

    <script src = "path/to/dommy.js" type = "text/javascript"></script>

Or you can use the raw github url (not recommended)

    <script src = "https://raw.githubusercontent.com/Manak/dommy/master/dommy.js" type = "text/javascript"></script>

If you are using dommy using the script tag, it will be available as dommy in the window object. It should be accessible as

    dommy()

Usage

Dommy is a function that returns a HTMLElement as specified in the options provided to it.

Create a div element <div></div>

    dommy({
        tag:'div'
    });

Create a div element with a span inside it <div><span></span></div>

    dommy({
        tag:'div',
        children:[
            {
                tag:'span'
            }
        ]
    });

Create a div element with a style attribute <div style = "background:red;"></div>

    dommy({
        tag:'div',
        attributes:{
            style:"background:\"red\";"
        }
    });

Create a div element with some text inside it <div>some text</div>

    dommy({
        tag:'div',
        children:[
            {
                type:'text',
                value:'some text'
            }
        ]
    });

Create a div element with a click Listener <div></div>

    dommy({
        tag:'div',
        events:{
            click:function(){
                alert('clicked!');
            }
        }
    });

Dommy Tree

You can build a dommy tree by using the following valid options

Key	Value	type	Example
tag	the tag name to be created	String	div, span etc.
type	text	String	Only used when plain-text needs to be added to an element. NO TAG REQUIRED.
value	The plain-text to be added to the element	String	Only used when plain-text needs to be added to an element. NO TAG REQUIRED.
attributes	attributes to be added to the element	Object	{ style : "background:red;" }
events	events to be bound to the element	Object	{ click : function(){ alert('test');} }
children	children to be appended to the element in order	Array of Dommy Elements

Tests

You can run the tests by running npm install and npm test

Support

You can use the github issues page or contact me manak[at]thundertick[dot]com for support with this.