如何使用 JavaScript 附加 HTML 代码？答案

【问题标题】：How can I append HTML code using JavaScript?如何使用 JavaScript 附加 HTML 代码？
【发布时间】：2020-03-17 12:46:36
【问题描述】：

我正在尝试使用 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 库或其他东西来简化它？

【问题讨论】：

请发布您的尝试。如果您单击编辑，然后单击[<>] sn-p 编辑器，您可以给我们一个minimal reproducible example
.appendChild() 有什么问题？构建 <li> 及其所有子元素，然后附加 <li>
但最终这仍然是无效标记。 <div> 不是 <span> 的有效子代
为什么要将
放入？ span 是内联元素，而 div 是块元素。这是错误的代码
div 是跨度中完全有效的子级，前提是其 CSS 属性 display 设置为 inline。

标签： javascript html appendchild

【解决方案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);

【讨论】：

谢谢，这正是我想要的。
它确实会产生无效的 HTML，但是，因为 <li> 元素只有 <ul> 或 <ol> 作为有效的父元素。
@MichalK 那么.appendChild() 是解决方案吗？您还提到了.innerHTML。所以这个“答案”用来解决你的问题的两个步骤。这怎么可能是答案？ o.O
@Andreas 我认为 op 正在寻找字符串插值
不，我不这么认为。该网站的重点是让互联网成为一个更好的地方，并教授如何将事情做得更好。创建无效的 HTML - 甚至没有在答案中指出该问题 - 似乎是不好的做法。但这是你的答案，你完全有权不同意我的观点。

【解决方案2】：

如果你想插入html元素字符串作为html节点，你必须创建html元素来使用appendChild()

但是，insertAdjacentHTML() 允许您添加 html 元素（如果作为字符串传递）。 https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

let author = "me";
let message = "Message...";
let time = "15:21";
let str = `<li><span class="author">${author}</span><span class="message">${message}</span><span class="time"><div class="line"></div>${time}</span></li>`;
document.querySelector('#nav').insertAdjacentHTML('beforeend', str);

&lt;ul id='nav'&gt;&lt;ul&gt;

let html = `<li>
  <span class="author">Me</span>
  <span class="message">Message...</span>
  <span class="time">
    <div class="line"></div>
    15:21
  </span>
</li>`;
document.querySelector('#list').insertAdjacentHTML('beforeend', html);

&lt;ul id='list'&gt;&lt;/ul&gt;

【讨论】：

在您的第二个示例中，使用模板文字没有意义。
@Andy 我使用模板文字来处理换行符/换行符。

【解决方案3】：

您可以使用template literal 和insertAdjacentHTML 来获得干净的方法。

function createListItem({ author, message, time }) {
  return `<li>
    <span class="author">${author}</span>
    <span class="message">${message}</span>
    <span class="time">
      <div class="line"></div>
      ${time}
    </span>
  </li>`;
}

const ul = document.querySelector('ul');

ul.insertAdjacentHTML('beforeend', createListItem({
  author: 'me',
  message: 'Message...',
  time: '15:21'
}));

.line { display: inline };

<ul>
  <li>Current</li>
</ul>

【讨论】：

【解决方案4】：

更简单，（对我来说）

const DomParser = new DOMParser()

function makeLI( author, message, time)
  {
  let ElemLI =
    `<li>
      <span class="author">${author}</span>
      <span class="message">${message}</span>
      <span class="time">
        <div class="line"></div>
        ${time}
      </span>
    </li>`
  return (DomParser.parseFromString( ElemLI, 'text/html')).body.firstChild
  }


// proof...
myList.appendChild(makeLI('you','Message...','15:21'))
myList.appendChild(makeLI('me','someone in ?','21:25'))

&lt;ul id="myList"&gt;&lt;/ul&gt;

【讨论】：

【解决方案5】：

这是一个你可以使用的小技巧。

你实际上可以使用现有的 DOM (HTML) 作为一种模板，基本上是克隆元素，然后用你想要的值替换部分。

首先使用 remove 从 DOM 中删除元素，虽然元素已从 DOM 中删除，但不会阻止您克隆它。

现在，当您想要另一个时，请调用clone(true)，true = deepClone，然后使用 querySelector 将 DOM 的部分替换为您想要的位。最后将这个克隆的元素添加到 DOM 中。

下面是一个简单的例子..

const ol = document.querySelector('ol');
const template = document.querySelector('li');
template.remove();

function append(o) {
  const {author, message, time} = o;
  const clone = template.cloneNode(true);
  clone.querySelector('.author').innerText=author;
  clone.querySelector('.message').innerText=message;
  clone.querySelector('.time').lastChild.nodeValue=time;
  ol.appendChild(clone); 
}

append({
  author: "me",
  message: "Message...",
  time: "15:21"
});

append({
  author: "Another me",
  message: "Something else..",
  time: "12:42"
});

append({
  author: "Whatever",
  message: "lalala..",
  time: "17:20"
});

.author {
  font-weight: bold;
  margin-right: 1rem;
}
.time {
  color: green;
}
li {
  margin: 0.5rem;
  border: 1px solid silver;
}
.line {
  border-bottom: 1px dotted red;
}

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

【讨论】：