Building DOM Elements

Build real DOM elements from tag-selector strings and query elements with string getters.

First Render: Chainable DOM Construction

"tag.class#id"._(attrs, children) builds a real DOM element from a tag-selector string, handling SVG namespace and input/textarea type parsing automatically.

document.body._child(
    "section#test"._([
        "button"._({
            style: {
                width: "10rem",
                height: "2rem",
                backgroundColor: "steelblue",
                color: "#fff"
            }
        }, [
            "span"._("test"),
            " button"
        ])._click(function () {
            alert("test");
        }),
        "img"._({ lazyload: "https://xxxxxx" }),
        "input@email type"._()
    ])
);

// Enable SVG inlining and image lazyload listeners
_Listener({
    svg: true,
    lazyload: true
});

Element Querying

"test".$;          // document.getElementById("test")
"div.test".$;       // document.querySelector("div.test")
"div.test".$all;    // [...document.querySelectorAll("div.test")]

Full method lists: String Extensions and Element Extensions.