在没有 jQuery 的情况下使用 JavaScript 中的对象创建 html DOM 元素

Question

我想知道是否有一种“简单”的方法通过指定 json 中的属性来创建大 DOM 对象？

我知道可以使用appendChild和/或innerHTML来做到这一点，但是对于这个有问题的对象，它看起来相当混乱。

目标是在 javascript 中从下往上创建这个 HTML 对象：

<div class="p-2">
    <div class="d-flex p-2 bg-dark2-35">
        <div class="Popover h-3">
            <div class="pfp" style="background-image: url('/data/images/PP/1.png')"></div>
        </div>
        <div class="d-grid ms-2 w-100">
            <p><b class="lead text-blue">Username</b> — <i>2020-01-16 19:29:34</i></p>
            <p class="text-white">some comment text</p>
        </div>
    </div>
</div>

我想知道是否可以做这样的事情（我知道它不起作用）：

let comment = document.getElementById("comment-section");
let elm = {
    className: "p-2",
    appendChild(node) {
        classList.add("d-flex", "p-2", "bg-dark2-35"),
        appendChild(node2){
            classList.add("Popover", "h-3"),
            // ... and so on
        }
    }
}
comment.appendChild(elm);

有没有一种简单的方法可以在纯 JS 中做到这一点？我必须创建一个函数才能实现此目的吗？或者甚至可以导入一个库？

这个问题有点类似于 Create DOM element from Object in javascript ，但是当涉及到这么多孩子、孩子等等时，我完全迷失了

当谈到 JavaScript 时，我有点新手。这个问题可能会很奇怪

Answer 1

您可以使用模板文字Mdn 文档 - 模板文字

const selector = document.getElementById('comment-section');

// By using createElement you can deal with loops, event listener, etc..

const comment = document.createElement('div');
comment.classList.add("p-2");

const username = "TypeWar";

// Template literals

comment.innerHTML = `
  <div class="d-flex p-2 bg-dark2-35">
      <div class="Popover h-3">
          <div class="pfp" style="background-image: url('/data/images/PP/1.png')"></div>
      </div>
      <div class="d-grid ms-2 w-100">
          <p><b class="lead text-blue">${username}</b> — <i>2020-01-16 19:29:34</i></p>
          <p class="text-white">some comment text</p>
      </div>
  </div>
`;

selector.appendChild(comment);

<div id="comment-section">
</div>

Answer 2

回到这个问题，看看这个函数：

/**
 * A "fancier" function to make a HTML element
 * @param nodeName
 * @param elementOptions
 */
function createElement(nodeName, elementOptions) {
    if (!nodeName && !elementOptions) return;
    if (!nodeName) nodeName = elementOptions.nodeName;

    // Defining the new element
    let elm = document.createElement(nodeName);

    if(elementOptions?.href){
        elm.setAttribute("href", elementOptions.href); // Use setAttribute to set the href attribute
    }

    // Assign classes if defined
    if (elementOptions?.classList)
        for (let i = 0; i < elementOptions.classList.length; i++)
            if (elementOptions.classList[i] && elementOptions.classList[i]?.trim() !== "")
                elm.classList.add(elementOptions.classList[i]);

    // Assign id if defined
    if (elementOptions?.id) elm.id = elementOptions["id"];

    // Assign title if defined
    if (elementOptions?.title) elm.title = elementOptions["title"];

    // Assign tabIndex if defined
    if (elementOptions?.tabIndex) elm.tabIndex = elementOptions["tabIndex"];

    // Assign innerHTML if defined
    if (elementOptions?.innerHTML) elm.innerHTML = elementOptions["innerHTML"];

    // Assign style if defined
    if (elementOptions?.style) {
        Object.entries(elementOptions.style).forEach(([property, value]) => {
            elm.style[property] = value;
        });
    }

    if (elementOptions?.events) {
        for (const [eventName, eventListener] of Object.entries(elementOptions.events)) {
            if (eventName in elm) {
                elm.addEventListener(eventName, eventListener);
            }else{
                console.warn(`Invalid event name: ${eventName}`);
            }
        }
    }

    // Assign attributes if defined
    if (elementOptions?.attributes) {
        Object.entries(elementOptions.attributes).forEach(([property, value]) => {
            elm.setAttribute(property, value);
        });
    }

    // Lastly do recursion to create children
    if (elementOptions?.children){
        for (let i = 0; i < elementOptions.children.length; i++) {
            let child = createElement(null, elementOptions.children[i])
            if (child) elm.appendChild(child)
        }
    }

    return elm;
}

它可以像这样创建：

const myElm = createElement("DIV", {
    classList: ["p-2"],
    children: [{
        nodeName: "DIV",
        classList: ["d-flex", "p-2", "bg-dark2-35"],
        children: [
            {
                nodeName: "DIV",
                classList: ["Popover", "h-3"],
                children: [{
                    nodeName: "DIV",
                    classList: ["pfp"],
                    style: {
                        backgroundImage: "url('/data/images/PP/1.png')"
                    }
                }]
            },
            {
                nodeName: "DIV",
                classList: ["d-grid", "ms-2", "w-100"],
                children: [
                    {
                        nodeName: "P",
                        innerHTML: `<b class="lead text-blue">${username}</b> — <i>${timestamp}</i>`
                    },
                    {
                        nodeName: "P",
                        classList: ["text-white"],
                        innerHTML: "some comment text"
                    }
                ]
            }
        ]
    }]
})

总的来说，与 React 可以实现或仅使用模板文字相比，这有点混乱。