如何使用 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 元素。 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);

<ul id='nav'><ul>

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);

<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) {

  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>

Answer 5

更简单，（对我来说）

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'))

<ul id="myList"></ul>