Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (simple-dom-make) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple DOM builder

Lightweight, no headache JSON to DOM utility.

What is does

Feed it a JS object, get a DOM element back.

What is doesn't

Replace a templating engine, or any kind of state management. This was never meant to replace React or anything.

Why use it ?

No config, lightweight, and does the heavy lifting for building a DOM from JS.

Nice to use for vanilla JS websites that need to remain nice and simple.

Usage

Most basic

import DomTreeBuilder from 'simple-dom-make';

// Get your root element
const rootElement = document.querySelector("#root");

// Build the inside as an object literal
const tree = {
    tag: "div",
    attributes: {
        "class": "container"
    },
    children: [
        {
            tag:"p",
            content: "A text paragraph"
        },
        {
            tag: "p",
            children: [
                {
                    tag: "TEXTNODE",
                    content: "The start of this phrase, "
                },
                {
                    tag: "b",
                    content: "followed by bold words"
                },
                {
                    tag: "TEXTNODE",
                    content: " to make a statement."
                }
            ]
        }
    ]
}
// Tada.
rootElement.append(DomTreeBuilder.make(tree));

This would output the following HTML in your browser :

<div class="container">
    <p>A text paragraph</p>
    <p>The start of this phrase, <b>followed by bold words</b> to make a statement."</p>
</div>

Dynamic

Use any kind of logic to build your tree.

const users = [
    {
        id: 35,
        name: "John Doe"
    },
    
    {
        id: 53,
        name: "Jane Don't"
    }
]

const usersTree = {
    tag: "div",
    attributes: {
        "class": "container"
    },
    children: users.map(user => ({
        tag: "div",
        attributes: {
            "class": "card",
            "data-user-id": user.id
        },
        children: [
            {
                tag: "h4",
                content: user.name
            }
        ]
    }))
}
rootElement.append(DomTreeBuilder.make(usersTree));

This would output the following HTML in your browser :

<div class="container">
    <div class="card" data-user-id="35">
        <h4>John Doe</h4>
    </div>
    <div class="card" data-user-id="53">
        <h4>Jane Don't</h4>
    </div>
</div>

The JS object in details

What you can feed the make method with.

Property	Type	Note
tag	string	Should be an HTML tag (a, abbr, div...) or "TEXTNODE" if you only want to give it plain text.
attributes (optional)	object	Key value pairs, where the key is the attribute name, and the value its value.
content (optional)	string	Text content of the element - shortcut for putting a TEXTNODE as a child element
children (optional)	array	An array of that same structure