Simple Javascript library used to create elements, no other libraries required
Create a simple element without attributes
el('div')
=> <div></div>
Some vanity methods/aliases to help you create elements quickly
# 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
el.create()
el.c()
There are a few ways to create elements with content inside. The easiest way is to pass it in via the second parameter
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
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
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'
el('li', {'content':'item 1'})
You could use selectors in the initial name to quick create with id's and classes
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
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)
el('div', {'data-action':'submit', 'id':'myId'})
=> <div data-action="submit" id="myId"></div>
You can now pass a function in as a callback.
el('div', function(done) {
console.log('this will be called after the creation of the div');
})
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');
})
}]
)
See the license file
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Write tests
- Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push -u origin my-new-feature) - Create new Pull Request
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent