如何使用 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";

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

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

Answer 1

您可以使用字符串插值将变量添加到代码中，如下所示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);

Answer 2

如果你想插入 html 元素字符串作为 html 节点，你必须创建 html 元素来使用appendChild()但是，insertAdjacentHTML()如果作为字符串传递，则允许您添加 html 元素。&nbsp;https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTMLlet 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);<ul id='nav'><ul>let html = `<li>&nbsp; <span class="author">Me</span>&nbsp; <span class="message">Message...</span>&nbsp; <span class="time">&nbsp; &nbsp; <div class="line"></div>&nbsp; &nbsp; 15:21&nbsp; </span></li>`;document.querySelector('#list').insertAdjacentHTML('beforeend', html);<ul id='list'></ul>

Answer 3

您可以使用模板文字来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>

Answer 4

这是一个你可以使用的小技巧。您实际上可以使用现有的 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) {&nbsp; const {author, message, time} = o;&nbsp; const clone = template.cloneNode(true);&nbsp; clone.querySelector('.author').innerText=author;&nbsp; clone.querySelector('.message').innerText=message;&nbsp; clone.querySelector('.time').lastChild.nodeValue=time;&nbsp; ol.appendChild(clone);&nbsp;}append({&nbsp; author: "me",&nbsp; message: "Message...",&nbsp; time: "15:21"});append({&nbsp; author: "Another me",&nbsp; message: "Something else..",&nbsp; time: "12:42"});append({&nbsp; author: "Whatever",&nbsp; message: "lalala..",&nbsp; time: "17:20"});.author {&nbsp; font-weight: bold;&nbsp; margin-right: 1rem;}.time {&nbsp; color: green;}li {&nbsp; margin: 0.5rem;&nbsp; border: 1px solid silver;}.line {&nbsp; border-bottom: 1px dotted red;}<ol>&nbsp; <li>&nbsp; &nbsp; <span class="author">Me</span>&nbsp; &nbsp; <span class="message">Message...</span>&nbsp; &nbsp; <span class="time">&nbsp; &nbsp; &nbsp; <div class="line"></div>&nbsp; &nbsp; &nbsp; 15:21&nbsp; &nbsp; </span>&nbsp; </li></ol>

Answer 5

更简单，（对我来说）const DomParser = new DOMParser()function makeLI( author, message, time)&nbsp; {&nbsp; let ElemLI =&nbsp; &nbsp; `<li>&nbsp; &nbsp; &nbsp; <span class="author">${author}</span>&nbsp; &nbsp; &nbsp; <span class="message">${message}</span>&nbsp; &nbsp; &nbsp; <span class="time">&nbsp; &nbsp; &nbsp; &nbsp; <div class="line"></div>&nbsp; &nbsp; &nbsp; &nbsp; ${time}&nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; </li>`&nbsp; return (DomParser.parseFromString( ElemLI, 'text/html')).body.firstChild&nbsp; }// proof...myList.appendChild(makeLI('you','Message...','15:21'))myList.appendChild(makeLI('me','someone in ?','21:25'))<ul id="myList"></ul>