javascript - 如何使用 JavaScript 附加 HTML 代码？

Question

我正在尝试使用 JavaScript 向 DOM 添加一个元素。我有一个 ul，我想添加一个 li。使用 appendChild 没有什么困难，但我希望我的 li 更复杂。

这是我想要实现的输出:

<li>
  <span class="author">Me</span>
  <span class="message">Message...</span>
  <span class="time">
    <div class="line"></div>
    15:21
  </span>
</li>

let author = "me";
let message = "Message...";
let time = "15:21";

如您所见，我想要实现的不仅仅是带有一些文本 (innerHTML) 的基本 li，而是一大段 HTML 代码。

我的问题是如何使用 JavaScript 获得此输出。还是我应该使用一些 JavaScript 库或其他东西来简化它？

Answer 1

看看this original link对于我们附加到 DOM 的代码。然后您可以使用字符串插值将变量添加到代码中，如下所示

function appendHtml(el, str) {
  var div = document.createElement('div'); //container to append to
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}

let author = "me";
let message = "Message...";
let time = "15:21";

var html = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
appendHtml(document.body, html);