时间戳

首页 > 解决方案 > 如何使用 JavaScript 附加 HTML 代码？

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

问题描述

我正在尝试使用 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";

正如你所看到的，我想要实现的不仅仅是li一些基本的文本（innerHTML），而是相当大的 HTML 代码块。

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

标签： javascripthtmlappendchild

解决方案

查看我们附加到 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);

推荐阅读