- quick to install
- simple to use
- fast
- you get validate tag ( so you can't make a mestake )
This is how you create elements with pure JavaScript
var ele = document.createElement('div');
var eleTextNode = document.createTextNode('My text node');
ele.setAttribute('class', 'my-class');
ele.setAttribute('id', 'my-id');
ele.setAttribute('data-' + uniqueName, 'myUniqueValue');
....
ele.appendChild(eleTextNode);
This is boring right? Now see how cele handle all this
let myElement = cele({
ele: 'div',
value: 'My text node',
cls: 'my-class',
id: 'my-id',
cData: {
name: 'uniqueName',
value: 'myUniqueValue'
}
})
It is that simple!!!
With cele you can create almost all HTML tags. See list of all supported elements that you can create with cele on the bottom of the page.
Let's see how to create link and image tags
let myLink = cele({
ele: 'a',
cls: 'my-link',
path:{
href: 'www.mypath.com'
}
})
let myImg = cele({
ele: 'img',
cls: 'my-image',
path:{
src: 'path/to/image.jpg'
alt: 'my best shot of mountains'
},
})
See how we set path propertie and then asign value to href
/src
.
When you create link the path must be set with href
propertie otherwise you will get an error.
Also when you create image, path must be included with two propertie src
and alt
.
You can escape alt
attribute but you will get worning because alt
attribute is required and web page will not validate correctly without it.
Real world example
// respnse from api
var persons = [
{
id:'1',
name: 'John',
age: 22
},
{
id:'2',
name: 'Peter',
age: 27
},
{
id:'3',
name: 'Mary',
age: 21
}
];
// now we create wrapper for our list
var wrapper = cele({
ele:'div',
cls:'wrapper'
})
// we create unordered list
var ul = cele({ele:"ul"})
// now we create li with names that we recive from our api
for (var i = 0; i < data.length; i++) {
var ele = cele({
ele:'li',
value: data[i].name,
cls:"list-of__persons",
})
// appending li to our unordered list
ul.appendChild(ele);
}
// finally appending list to DOM
document.querySelector("#root").appendChild(wrapper);
In some cases you will manuali type your list and cele make this easy to!
var myList = cele({
ele: "ul",
list: {
value:["John","Peter","Mary"],
cls:'my-list'
}
})
When you create list like this, you must provide list property as object that require value property as array!
Tag | Type | Require | For |
---|
ele | stirng |yes | HTML element
value | stirng |no | Element value
cls | stirng |no | Element class
id | stirng |no | Element id
cData | object |no | Custom data-* attribute
cData |string|yes (when cData is set) | Custom data-* name and value path | object |yes (when ele is a/img) | Link / Source list | array |yes (when ele is ul)| List
List of supported elements:
- a
- img
- div
- p
- h1-h6
- span
- ul / ol
- li
- article
- main
- nav
- aside ...