sea-grass/cel.js

Create ELement

cel

Cel.js is a simple HTML Element creation library written in TypeScript.

It allows the developer to specify the structure of an HTML element including its various attributes in a JSON object, and pass that to the Cel constructor to create their HTML element.

It turns code like:

var myElement = document.createElement("div");
myElement.id = "myElement";
myElement.classList.add("these", "are", "my", "classes");
myElement.style.position = "absolute";
myElement.style.width = "480px";
myElement.style.margin = "0 auto";
myElement.style.color = "magenta";

into:

var myElement = cel({
  type: "div",
  id: "myElement",
  classes: ["these", "are", "my", "classes"],
  style: {
    position: "absolute",
    width: "480px",
    margin: "0 auto",
    color: "magenta"
  }
});

I admit that it does not seem like a "space saver" -- in fact it seems like the Cel version has more lines than the sans-Cel version. This is the cost of expressiveness: the ability to specify your HTML element with one function call and a declarative syntax.

This could be used if you are hesitant add jQuery to your project just for the ability to declare HTML elements in JavaScript.

It would excel in a highly dynamic environment (e.g. a Single Page Application), where the UI could be declared using Cel options.

Some code snippets

/* Create a div */
var newDiv = cel({ innerText: "Hello" + " world!"});

/* Create an img */
var newImg = cel({
  type: "img",
  attrs: {
    src: "//placekitten.com/100/100"
  }
});

/* Create a header */
var headerOptions = {
  "type": "div",
  "id": "header",
  "classes": ["fixed-top", "full-width"],
  "children": [
    cel({
      "type": "img",
      "id": "logo",
      "attrs": {
        "src": "//placekitten.com/g/64/64"
      }
    }),
    cel({
      "type": "h1",
      "id": "brand",
      "innerText": "Kittens"
    })
  ]
};
var newHeader = cel(headerOptions);

cel.js's Issues

Ability to replace Dom elements

As per @mctaggaj suggestion