@stegopop/ele v1.0.8

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