Available for hire
el.js - a Lightweight Vanilla Javascript Element Creation Library

Simple Vanilla Javascript library used to create elements, no other libraries required Find it on github at the el.js repository

Creation of elements

Create a simple element without attributes

1
2
el('div')
=> <div></div>

Some vanity methods/aliases to help you create elements quickly

1
2
3
4
5
6
# Vanity helpers
el.div()
el.p()
el.input()
el.img({'src':'http://placekitten.com/200/300'})
el.a({'src':'http://placekitten.com/200/300'})

For backwards compatibility you can still access el() via the older create methods

1
2
el.create()
el.c()

Lets add some content on creation of elements

There are a few ways to create elements with content inside. The easiest way is to pass it in via the second parameter

1
2
el('div', 'Some content')
=> <div>Some content</div>

If you pass in a html node as the second attribute, it’ll be added as a child

1
2
3
4
el('ul',
  el('li', 'item 1')
)
=> <ul><li>item 1</li></ul>

If you want to create a set of li’s then you can pass in an array

1
2
3
4
5
6
7
8
9
10
el('ul', [
  el('li', 'item 1'),
  el('li', 'item 2'),
  el('li', 'item 3'),
  el('li', 'item 4'),
  el('li', 'item 5'),
  el('li', 'item 6')
  ]
)
=> <ul><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li><li>item 5</li><li>item 6</li></ul>

For backwards compatibility you can still add content via ‘content’

1
el('li', {'content':'item 1'})

Add attributes to your elements

You could use selectors in the initial name to quick create with id’s and classes

1
2
3
4
5
el('div#myId.content')
=> <div id="myId" class="content"></div>

el('div.row')
=> <div class="row"></div>

el also allows a key:value json object to be passed through as the second attribute

1
2
3
4
5
el('div.row', {'id':'myId', 'class':'my_class'})
=> <div id="myId" class="my_class row"></div>

el('a', {'class':'content', 'href':'https://github.com/markgandolfo/el.js', } 'content' )
=> <a class="content" href="https://github.com/markgandolfo/el.js">el.js</a>

Create data-attributes (or any other attributes)

1
2
el('div', {'data-action':'submit', 'id':'myId'})
=> <div data-action="submit" id="myId"></div>

Callbacks:

You can now pass a function in as a callback.

1
2
3
el('div', function(done) {
  console.log('this will be called after the creation of the div');
})

Examples of creating elements with id, classes, attributes, content and callbacks

1
2
3
4
5
6
7
8
9
el('ul.navbar', {'data-name':'navigation'}, [
  el('li', 'item 1'),
  el('li', 'item 1'),
  function(element) {
  this.addEventListener('click', function() {
    console.log('clicking on the navigation');
  })
  }]
)

Contributors

modsognir thesebas

Comments