javascript 中的递归以使用具有单个父元素的子元素构建 HTML

Question

我有一个 json 对象，我正在循环它并使用每个对象构建 html 块。到目前为止，我已经让它正常工作，但是我遇到了子项不在其自己的父容器中的问题。我也不希望顶级项目包含在父容器中。任何帮助和建议将不胜感激。// test json datavar jsonTest = {    "myJson": [    {        "type": "link",        "navigationIndex": 0,        "formData":        {            "label": "link",            "url": "https://www.google.com"        },        "childItems": [        {            "type": "column",            "navigationIndex": 0,            "formData":            {                "label": "column 1"            },            "childItems": []        },        {            "type": "column",            "navigationIndex": 1,            "formData":            {                "label": "column 2"            },            "childItems": []        },        {            "type": "column",            "navigationIndex": 2,            "formData":            {                "label": "column 3"            },            "childItems": []        },        {            "type": "column",            "navigationIndex": 3,            "formData":            {                "label": "column 4",            },            "childItems": []        }]    }]};// main build functionfunction buildFromJson() {        var jsonData = jsonTest.myJson;        appendDom($(".root"), jsonData);}// html templatesfunction getLinkContainer(type, label, url) {        var element = `                <div class="element" data-item-type="${type}">                        <a href="${url}">${label}</a>            </div>        `;        return element;};function getColumnContainer(type, label) {        var element = `                <div class="element" data-item-type="${type}">                        ${label}                </div>        `;        return element;}