Nova

A tool to create DOM elements dynamically with a simple syntax

Is really simple to use, you can create a chain of elements with semantic in pure javaScript avoiding to nomeate a huge amount of variables.

Every createElement call is a element creation stack, then you can set a huge amount of properties to your elements!

Installation

You can insert the script tag in your HTML:

Dev environment

Download the script from https://raw.githubusercontent.com/hfabio/Nova/master/Nova.dev.js and insert in your HTML using:

  <script type="text/javascript" src="Nova.dev.js"></script>

Production environment

Download the script from https://raw.githubusercontent.com/hfabio/Nova/master/Nova.min.js and insert in your HTML using:

  <script type="text/javascript" src="Nova.min.js"></script>

How to use

after install you can create a HTML node/nodelist using this tool like this: call the createElement method (and don't forget it receives an object with some properties) and then add to the DOM. you can set in the method these parameters:

Attribute	Type	Default value	Description
type	string	div	The HTMLElement to be created.
classes	string \| Array	''	A string with a class or an array of classes E.g. classes: 'card' \| classes: ['btn', 'btn-bg', 'btn-success']
style	{[key:string]:string}	{}	Receive an object with css properties using camel case to set in element. E.g. style: {fontSize: '24px'}
html	string	''	Same as element innerHTML, you can type anything here E.g. html:'Hello world'
attributes	{[key:string]:string}	{}	Receive an object where the key is the element attribute caller (like 'onclick') and the value is a string calling an method. E.g. attribues: {onclick: 'someFunction()'}
listeners	{[key:string]: function reference}	{}	Receive an object where the key is the element eventListener caller (like 'click') and the value is a reference to an method. E.g. listeners: {click: someFunction}
children	Array	[]	Receive a HTMLElement array, and you can use this feature to create a stack of elements. E.g. createElement({type: 'div', children: [ createElement({type: 'h1', html: 'Hello world'}),createElement({type: 'h2', html: 'Nova is here!'}), ]})

Creating a simple element

  let element = createElement({ type: 'span', html: 'Hello world!'});
  document.body.appendChild(element);

Adding property or listener

  let element = createElement({ type: 'span', html: 'Hello world! click me', attributes: { onclick: 'alert("teste")' }});
  document.body.appendChild(element);

Creating dinnamically stuff

  let shop_list = ['beans', 'floor', 'butter', 'soda'];
  let element = createElement({
    type: 'ul',
    children: shop_list.map(item => createElement({type: 'li', html: item}))
    });
  document.body.appendChild(element);

hfabio / Nova