node package manager



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({
    content:"Hello, " + name,


For use in the browser:

<script src=""></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:

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

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

<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:

    content:"Turn Left",
<span class="left" id="next-instruction">Turn Left</span>


If not specified, element() will default to a div tag and "" as content:



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