https://github.com/jareware/el-js
Utility function for generating HTML/XML DOM trees in the browser.
https://github.com/jareware/el-js
Last synced: 11 months ago
JSON representation
Utility function for generating HTML/XML DOM trees in the browser.
- Host: GitHub
- URL: https://github.com/jareware/el-js
- Owner: jareware
- License: mit
- Created: 2015-10-25T14:12:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-11-22T12:01:14.000Z (over 10 years ago)
- Last Synced: 2025-08-02T18:36:24.743Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# el-js
Utility function for generating HTML/XML DOM trees in the browser.
## API
The library exposes a single function, `el()`, which returns [a node](https://developer.mozilla.org/en-US/docs/Web/API/element) with the given name. The rest are var-args, so that:
* an object sets attributes as key/value-pairs
* a string/number/boolean sets the text content of the node
* a node is treated as a child node
* an array is treated as a list of child nodes
For convenience, [falsy values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) in the list of children are ignored.
There's three special cases for the name argument:
* when `""`, a text node is created, with content from the 2nd arg
* when `"
Click here
Text after link
```
Mapping arrays into child elements, and filtering by returning falsy values (in this case `undefined`):
```js
el('ul',
[ 1, 2, 3, 4, 5 ].map(function(i) {
if (i % 2) return el('li', i);
})
);
```
produces:
```html
- 1
- 3
- 5
```
Appending children into existing elements:
```js
el(document.querySelector('#existing-root'),
el('p', 'New node added under root')
);
```
produces:
```html
Possible previous content
New node added under root
```
## Acknowledgements
Hand-crafted by [@jareware](https://twitter.com/jareware) of [jrw.fi](http://jrw.fi/), with the [loving support](http://futurice.com/blog/sponsoring-free-time-open-source-activities) of [Futurice](http://futurice.com/).
## License
[The MIT license](http://opensource.org/licenses/MIT)
## History
Because `el-js` is so tiny, it was originally published in 2014 as [just a gist](https://gist.github.com/jareware/8dc0cc1a948c122edce0). This repository and an [npm-presence](https://www.npmjs.com/package/el-js) were added for convenience.