README
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.