elementory v1.2.5
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 = element({
tag: "a",
content: "Hello, " + name,
class: displayType,
id: "welcome",
href: profileURL
});
Installation
For use in the browser:
<script src="https://unpkg.com/elementory/elementory.min.js"></script>
For use in Node:
$ npm install -S elementory
var element = require("elementory");
Basic Usage
The simplest use is passing the tag
and content
arguments:
element("div", "Hello World!");
<div>Hello World!</div>
Adding attributes
HTML attributes can be passed in as object properties of the attributes
argument:
element("a", "Confirm", {
class: "important",
id: "confirm-button"
});
<a class="important" id="confirm-button">Confirm</a>
Constructing multiple elements
Multiple elements can be created with one call, by passing an array as the content
argument.
element("li", ["Apples", "Bananas", "Oranges"], { class: "unchecked" });
<li class="unchecked">Apples</li>
<li class="unchecked">Bananas</li>
<li class="unchecked">Oranges</li>
Self-closing elements
Any element can be constructed with a self-closing tag by setting the content
argument to false
.
element("input", false, { class: "editable" });
<input class="editable" />
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:
element({
tag: "span",
content: "Turn Left",
class: "left",
id: "next-instruction"
});
<span class="left" id="next-instruction">Turn Left</span>
Defaults
If not specified, element()
will default to a div
tag and ""
as content:
element();
<div></div>
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".