crEl

A small constructor for generated DOM elements

Readme RU-ru

Features

• Cross-browser
• Lightweight
• Dependencies free
• Events
• Data-* attributes
• Shortcut for most usable attributes (e,c,s,d)

##How it works ###What you need to get

<a href="#" class="btn">Click me</a>

###In the past

var a = document.createElement('a');
    a.setAttribute('href','#');
    a.setAttribute('class','btn');
    a.appendChild(document.createTextNode("Click me"))

###Right now

var a = crEl('a',{href:'#', c:'btn'}, "Click me")

##Docs

crEl(tagName,[attr, child-1,... child-n]) // return DOM element

Parameters	Type	Description	Example
tagName	String	name of HTML tag	div, em, a, table, ...
attr	Object	attributeName:value	{name:'psw', type:'password'}
child	String or DOM element or Array	Child nodes of element	"Hello" or crEl("strong",{},"hello")

c - is alias for "class" attribute s - is alias for "style" attribute d - for set data-* attributes e - for attach events

Required is only the first, it is a name tag . Attributes can be transmitted anywhere, but bestpractice would give them just behind the tag name. Nesting child elements is limited only by your needs.

###Events

Events can be attached to any of the created elements . Events are attached cross-browser , and you do not need to think about it . The called function is passed as a context element itself , so can be used to access the item this

var myFunc = function(){
	alert(this.innerHTML)
}
crEl('a',{href:'#', e:{click:myFunc}}, "Click me")

or use anonimous function

crEl('a',{href:'#', e:{click:function(){alert(this.innerHTML)}}}, "Click me");

or use inline syntax

crEl('a',{ onclick: function(){alert(this.innerHTML);}, href:'#'}, "Click me");
crEl('a',{ onclick: myFunc, href:'#'}, "Click me");

###Styles

You can use the classic inline styles , and specify them as properties of the object js

crEl('a',{href:'#', s:'color:red; font-weight:bold'}, "Click me")

or

crEl('a',{href:'#', s:{color:'red', fontWeight:'bold'}}, "Click me")

##Examples

    crEl('hr'); // return <hr> DOM element

    crEl('div',{c:'jumbotron'}); // return <div> DOM element with class jumbotron

    crEl('a',{href:'#'}, "link", crEl('sup',{ d:{role:'badge'}, s:'color:red'},"NEW")); 
    // return <a href="#">link<sup data-role="badge" style="color:red">NEW</sup></a>

    crEl("button",{e:{click:function(){alert('Ololo');}}},"Click Me"); // button with event click

    crEl('ul',{c:'menu', id:'menu'},
            crEl('li', crEl('a', {href:'#1'},"Link-1")),
            crEl('li', crEl('a', {href:'#2'},"Link-2")),
            crEl('li', crEl('a', {href:'#3'},"Link-3")),
    ); // typical menu

    var i = 0, menu = document.getElementById('menu');
    while(i<=100500){//to add 100500 items to the menu
        menu.appendChild( crEl('li', crEl('a', {href:'#'+i},"Link-"+i)) ); 
        i++;
    }

##Install ###Bower

    bower i https://github.com/xneek/crEl

##Simple converter HTML⇨crEl http://fednik.ru/f/crel/