Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

DOMBuilder JS

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

NPM Github

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!

About

DOMBuilder JS NPM Package

Resources

Releases

No releases published

Packages

No packages published