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");

Publishing

Releases are published by the Publish Package GitHub Actions workflow using npm Trusted Publishing.

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