Elementory
Elementory is a tiny library for constructing HTML elements with JavaScript.
Before & After
If you find yourself getting tripped up on quotation marks while doing this:
var html = "<a class='" + displayType + "' id='welcome' href='" + profileURL + "'>Hello, " + name + "</a>";
Elementory lets you do this instead:
var html = ;
Installation
For use in the browser:
For use in Node:
$ npm install -S elementory
var element = ;
Basic Usage
The simplest use is passing the tag
and content
arguments:
;
Hello World!
Adding attributes
HTML attributes can be passed in as object properties of the attributes
argument:
;
Confirm
Constructing multiple elements
Multiple elements can be created with one call, by passing an array as the content
argument.
;
ApplesBananasOranges
Self-closing elements
Any element can be constructed with a self-closing tag by setting the content
argument to false
.
;
Alternate notation
As a stylistic alternative, all properties can be passed in as a single object—The tag
and content
properties are interpreted the same as the above standalone arguments, and all other properties are added to the element as attributes:
;
Turn Left
Defaults
If not specified, element()
will default to a div
tag and ""
as content:
;
Benefits
Elementory removes the messiness of manually concatenating strings and variables to produce HTML—and it makes it far easier to comment out or remove individual pieces.
What's the name mean?
It's a portmanteau of "element" and "factory", as well as a homophone of "elementary".