Ele

A simple Element Builder to replace the horrendous native DOM API methods for creating new Elements.

Instead of this.

var wrapper = document.createElement("div");
wrapper.classList.add("wrapper"); // not chainable off createElement
wrapper.id = "wrapper"; // not chainable off createElement
wrapper.innerText = "Press a button.";

var child = document.createElement("button");
child.classList.add("ugh");
child.id = "child";
child.setAttribute("data-prop", "A data property");
child.addEventListener(function() {
    alert("You pressed the button");
});

var child2 = document.createElement("button");
child.classList.add("omg");
child.id = "child2";
child.addEventListener("click", function() {
    alert("You pressed the other button");
});

wrapper.append(child, child2);
document.body.appendChild(wrapper);

You can instead use this more simple object structure.

var wrapper = Ele.mint({
    element: "div",
    class: "wrapper",
    id: "wrapper",
    text: "Press a button.",
    children: [
        Ele.mint({
            element: "button",
            "id": "child",
            "class": "much nicer"
            dataProp: "A data property",
            event: {
                type: "click",
                listener: function() { alert("You pressed the button"); }
            }
        }),
        Ele.mint({
            element: "button",
            "id": "child2",
            "class": "add many if you want"
            event: {
                type: "click",
                listener: function() { alert("You pressed the other button"); }
            }
        })
    ]
});
document.body.appendChild(wrapper);

Install

With NPM

npm install @stegopop/ele

Or a CDN

<script src="https://cdn.jsdelivr.net/npm/@stegopop/ele"></script>

Browser Support

This project is transpiled to support back to IE11.

In Browser

<script src="/dist/ele.min.js"></script>
var button = Ele.mint({
    element: "button",
    id: "dude",
    html: "Press me!"
});
document.body.appendChild(button);

In Node

There is no DOM in the node environment. So you'll have to provide one.

You might use JSDom.

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const { window } = new JSDOM(`...`);
// or even
const { document } = (new JSDOM(`...`)).window;


let Ele = new (require('./src/Ele.js'))();
Ele.setWindow(window);
Ele.setDocument(document);

let html = Ele.mint({
    element: "div",
    id: "dude",
    text: "Dude",
});

document.body.appendChild(html);
console.log(document.body.length);

Methods

In the browser, the only thing you need is to statically mint your elements. You do this with the mint(options) method.

In node, there are 2 more methods. This is because node doesn't provide a DOM. You'll need to set it up yourself with setDocument(object), or setWindow(object). These methods are dynamic so you'll need to instantiate an Ele.

Options

Option	Type	Description
element	String	Required - The element to create.
id	String	A string to assign to the element id. Must not begin with a digit. Must not contain spaces. Must not be a duplicate of another id.
class	String | Array	The class or classes to add to the element. Can be a space delimited String.
html	String	HTML content within the element. If this is given to you by the user, then you should use text instead.
text	String	Text content within the element.
children	Array<Ele>	Array that contains any children Ele elements. Displays after html/text.
event	Array<Object>	Array of objects with values { type: 'event_type', listener: function }
[other]	Object	Any camelCase property passed as an option will be assigned as a kebab-cased attribute to the element. This allows you to specify any attribute (aria, data, etc.).