What
A small, simple, and fast DOM creation utility
Why
Writing HTML is stupid. It's slow, messy, and should not be done in JavaScript.
The best way to make DOM elements is via document.createElement
, but making lots of them with it is tedious.
Crel makes this process easier.
Inspiration was taken from laconic, but Crel wont screw with your bad in-DOM event listeners, and it's smaller, faster, etc...
Changelog
Installing
For browserify:
npm i crel
let crel = ;
For AMD:
require;;
Using ES6+:
;
For standard script tag style:
Usage
Syntax:
// Returns a DOM element;
where childN
may be:
- a DOM element,
- a string, which will be inserted as a
textNode
, null
, which will be ignored, or- an
Array
containing any of the above
Examples
let element = ; // Do something with 'element'
You can add attributes that have dashes or reserved keywords in the name, by using strings for the objects keys:
;
You can define custom functionality for certain keys seen in the attributes object:
crelattrMap'on' = { for let eventName in value element; };// Attaches an onClick event to the img element;
You can pass already available elements to Crel to modify their attributes / add child elements to them
;
You can assign child elements to variables during creation:
let button;let wrapper = ;
You could probably use Crel to rearrange existing DOM elements..
;
But don't.
Proxy support
If you are using Crel in an environment that supports Proxies, you can also use the new API:
let crel = proxy; let element = crel;
Browser support
Crel uses ES6 features, so it'll work in all evergreen browsers.
Goals
Easy to use & Tiny
Less than 1K minified, about 500 bytes gzipped === Smal
Fast
Crel is fast.
Depending on what browser you use, it is up there with straight document.createElement
calls: http://jsperf.com/dom-creation-libs/10
License
MIT