xneek-crel
v2.4.0
Published
A small constructor for generated DOM elements
Downloads
7
Readme
crEl
A small constructor for generated DOM elements
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
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/