Dom-Creation

Dom-Creation is a quick and light package for building DOM

Setup

import element from 'dom-creation';

Examples

Building a div with a paragraph with red text

element('div').add('p').t('Hello World').a('style', 'color:red;').f().ap(document.body);

-or-

element().add('div').add('p').t('Hello World').a({'style': 'color:red;'}).f().f().ap(document.body);

Add an event to a button

element('button').e('click', (event) => {alert('Clicked');}).t('Click Me!').ap(document.body);

Get DOM of the element

const dom = element('div').dom;

Get current DOM after appending to live DOM

const dom = element('div').ap(document.body).dom;

Build from list of data

const arr = ['Hello', 'And', 'Welcome'];
element('div').each(arr, (elem, data) => {
    elem.add('p').t(data).f();
}).ap(document.body);

Add premade DOM elements

const p = document.createElement('p');
p.appendChild(document.createTextNode('Hello World'));
element('div').addDom(p).ap(document.body);

There are three ways to append an element that all take a DOM element as an argument

const dom = document.body;
element().ap(dom); //appends the element to DOM object
element().preap(dom); //prepends the element to DOM object which adds the child to top of DOM object's children
element().aftap(dom); //appends the element after another DOM object as a sibling of the DOM

Instead of:

element('div').add('span').add('p').t('Nested').f().f().f().ap(document.body);

You can do:

element('div').add('span').add('p').t('Nested').close().ap(document.body);

The .close() will add all elements to each other all the way up to the top of the tree. You can still add more elements, but they will be built in a new DOM tree.