db

dom-builder

DOMBuilder JS NPM Package

Showing:

Popularity

Downloads/wk

5

GitHub Stars

0

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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!

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100