OCannings / el.js

native javascript method to create dom objects

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

el.js

Simple Javascript library used to create elements.

Examples:

Create a simple element without attributes

el.create('div')
=> <div></div>

Create an element with content inside and a class

el.create('a', {'class':'content', 'href':'http://markgandolfo.com', 'content':'Mark Gandolfo'})
=> <a class="content" href="http://markgandolfo.com">Mark Gandolfo</a>

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

el.create('div#myId.content')
=> <div id="myId" class="content"></div>

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

el.create('div.row', {'id':'myId', 'content':'Some content in your div'})
=> <div id="myId" class="row">Some content in your div</div>

Create a child and parent element

img = el.create('img', {'src':'http://placekitten.com/200/300'})
el.create('a', {'href':'http://markgandolfo.com', 'content':img})
=> <a href="http://markgandolfo.com"><img src="http://placekitten.com/200/300" /></a>

Create data-attributes (or any other attributes)

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

Helper Methods

These can be used standalone, or you could pass attributes in as an argument

el.c() - This is an alias of el.create()
el.div()
el.p()
el.input()
el.img({'src':'http://placekitten.com/200/300'})
el.a({'src':'http://placekitten.com/200/300'})

Contributors

modsognir

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

About

native javascript method to create dom objects


Languages

Language:JavaScript 100.0%