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.

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

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

Live preview · @pardnchiu/renderjs@2.0.3

Element Querying

<div id="test">#test</div>
<div class="test">first .test</div>
<div class="test">second .test</div>
<pre id="out"></pre>
<script>
    "out".$.textContent = [
        '"test".$        -> ' + "test".$.textContent,
        '"div.test".$    -> ' + "div.test".$.textContent,
        '"div.test".$all -> ' + "div.test".$all.length + " elements"
    ].join("\n");
</script>

Live preview · @pardnchiu/renderjs@2.0.3

Full method lists: String Extensions and Element Extensions.