A tiny library for constructing HTML elements with JavaScript
JavaScript HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.travis.yml
CNAME
LICENSE
README.md
_config.yml
elementory.js
elementory.min.js
gulpfile.js
package-lock.json
package.json

README.md

Elementory

Elementory is a tiny library for constructing HTML elements with JavaScript.

Build Status Version License

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".