Easy create your HTML elements with cele

Why c-ele?

• quick to install
• simple to use
• fast
• you get validate tag ( so you can't make a mestake )

How to...

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!!!

cele recive JavaScript object as an argument.

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.

Examples

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:

1. a
2. img
3. div
4. p
5. h1-h6
6. span
7. ul / ol
8. li
9. article
10. main
11. nav
12. aside ...