element-creator

A library that helps to create interactive HTML elements (virtual dom) easily. Inspired by MithrilJs framework.

• Installation
• Examples
• Documentation

Installation

element-creator is available on NPM and as a Javascript library.

Install on NPM

npm install element-creator

Or include on html file on unpkg

 
<script  type="text/javascript" src="https://unpkg.com/element-creator@1.0.5/build/element-creator.min.js"></script>

Examples:

A one page content example located at build/index.html. Or a quick demo below

// using node with es6, otherwise var e = require('element-creator');
import e from 'element-creator';
 
var myDiv = e('div#myElement.class__1[name=awesome-div]', 'My awesome div', {
    on: { 'click': function(e) {
        alert('You have clicked on My awesome div');
    }}
})

The variable myDiv above generates div html element with click event that prop an alert message.

<div id="myElement" class="class__1" name="awesome-div">My awesome div</div>

Documentation

element-creator contains Elementextended (or wrapper) which wraps/adds interactive functions such as .find, .all to standard element and ElementCreator which creates HTML elements then wrap and return an ElementExtended element.

ElementCreator

// vdom return new element
var vdom = e(elementString, children, options)

Where:

• elementString is a string that specify the element parameters creation with following pattern:

{elementType}{(*)elementId}{(*)elementClasses}{(*)elementAttributes}

(*) is optional

• children is text node or html elements that stay inside the element.

• options os other configuration including:

  • on: add event listener
  • attrs: element's attributes
  • data: element's data

ElementExtended

// wrappedElement return a html element within the html body with more interactive functions
var wrappedElement = e.wrap(querySelector, isMultiple)

Where:

• querySelector is standard query selector string for example h1 will look for heading h1, .class__1 will look for any element has class .class__1.
• isMultiple is false by default. If set to true it will return an array of element match with querySelector.