在沒有jQuery的javascript中使用物件創建htmlDOM元素-有解無憂

我想知道是否有一種“簡單”的方法可以通過在 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，我還是個新手。這個問題可能聽起來很奇怪

uj5u.com熱心網友回復：

您可以使用模板文字Mdn docs - Template Literals

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 >
      <div >
          <div  style="background-image: url('/data/images/PP/1.png')"></div>
      </div>
      <div >
          <p><b >${username}</b> — <i>2020-01-16 19:29:34</i></p>
          <p >some comment text</p>
      </div>
  </div>
`;

selector.appendChild(comment);

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441726.html

標籤：javascript html dom

上一篇：在:containsjQuery選擇器中使用正則運算式

下一篇：PHP：使用AJAX插入資料