DOMBuilder JS

Builds Html elements from your JavaScript code in a simple and fast way.

Guide

Installation

npm install dom-builder

Use it

    <script type="text/javascript" src="node_modules/dom-builder/dom-builder.js"></script>

or

    var DOMBuilder = require('dom-builder');

My div container

    <div id="fruits"></div>

JS Code

    var myElement = new DOMBuilder();

    myElement.ele('ul', {class: 'delicious'})
                  .ele('li', 'apple')
                  .ele('li')
                      .ele('a', {href: '#', class: 'orange'}, 'orange')
                  .cl()
                  .ele('li', 'coconut')
                  .ele('br')
                  .ele('li')
                      .val('berries')
                  .cl()
              .cl();

Self closing tags like BR or INPUT don't need to close, just write .ele('br') without to add .cl()

    var fruits = document.getElementById('fruits');
    fruits.insertAdjacentHTML('beforeend', myElement.body);

    // using Jquery
    $('#fruits').append(myElement.body);

    // other way
    fruits.appendChild(myElement.parse(document));

You can get the string html code with myElement.body or myElement.toString()

insertAdjacentHTML works very well

The result

    <div id="fruits">
        <ul class="delicious">
            <li>apple</li>
            <li>
                <a href="#" class="orange">orange</a>
            </li>
            <li>coconut</li>
            <br>
            <li>berries</li>
        </ul>
    </div>

And that's all!