如何在 javascript 中创建 DOM 元素结构

Question

I've got this code and I need to transform ti to DOM structure (more information below)

const data = [
  {
    "type": "paragraph",
    "children": [
        {
            "type": "text",
            "text": "Hey all!"
        },
        {
            "type": "break"
        },
        {
            "type": "break"
        },
        {
            "type": "text",
            "text": " It's been a while since we partied "
        },
        {
            "type": "important",
            "children": [
                {
                    "type": "text",
                    "text": "together"
                }
            ]
        },
        {
            "type": "text",
            "text": " in a pool full of people!"
        }
    ]
},
{
    "type": "heading",
    "id": "table-of-contents",
    "level" : 2,
    "children": [
        {
            "type": "text",
            "text": "Table of contents:"
        }
    ]
},
{
    "type": "list",
    "bullet": "decimal",
    "children": [
        {
            "type": "listitem",
            "children": [
                {
                    "type": "anchor",
                    "href": "#table-of-contents",
                    "children": [
                        {
                            "type": "text",
                            "text": "How to start a podcast?"
                        },
                        {
                            "type": "text",
                            "text": ""
                        }
                    ]
                },
                {
                    "type": "text",
                    "text": "Where to find your topics?"
                }
            ]
        },
        {
            "type": "listitem",
            "children": [
                {
                    "type": "text",
                    "text": "Where to find your topics?"
                }
            ]
        },
        {
            "type": "listitem",
            "children": [
                {
                    "type": "text",
                    "text": "What equipment do you need?"
                }
            ]
        }
    ]
}
]

What is the best way to do it?

I mean, should I do

const wrapper = document.createElement("div");

data.forEach(element => {
    if(element.type === "paragraph") {
        const paragraph = document.createElement("p");

        element.children.forEach(kiddo => {
            if(kiddo.type === "text") {
                const textNode = document.createTextNode(kiddo.text);

                paragraph.appendChild(textNode);
            }
        });
    }
})

..and so on? I mean do I have to use "createElement/createTextNode" functions or does javascript have some kind of DOMBuilder than I can convert such structure into DOM?

Answer 1

As Teemu says, you can create your own "DOM Builder" by adding methods to an object and recursing.

    const body = document.getElementsByTagName("body")[0];
    const wrapper = document.createElement("div");

    const DOMBuilder = {
        "anchor" : e => { 
            var a = document.createElement("a"); 
            a.href = e.href; 
            return a; 
        },
        "heading" : e => { return document.createElement("h" + e.level); },
        "list" : e => { 
            return document.createElement((e.bullet == "decimal") ? "ol" : "ul"); 
        },
        "listitem" : () => { return document.createElement("li"); },
        "paragraph" : () => {return document.createElement("p"); },
        "text" : e => {return document.createTextNode(e.text); },
    }

    function CreateDOMElement(e) {
        var ne;
        if (ne = DOMBuilder[e.type]?.(e)) {
            if (e.id) ne.id = e.id;
            e.children?.forEach(c => { 
                var ce = CreateDOMElement(c); if (ce) ne.appendChild(ce); 
                });
            return ne;
        }
    }

    data.forEach(element => { 
        var ne = CreateDOMElement(element); if (ne) wrapper.appendChild(ne); 
        });
    body.appendChild(wrapper);