javascript - 使用内置 DOM 方法或 Prototype 从 HTML 字符串创建新的 DOM 元素

Question

我有一个表示元素的 HTML 字符串:'<li>text</li>' .我想将它附加到 DOM 中的一个元素(在我的例子中是 ul)。如何使用 Prototype 或 DOM 方法做到这一点？

(我知道我可以在 jQuery 中轻松做到这一点，但不幸的是我们没有使用 jQuery。)

Answer 1

注意:目前大多数浏览器都支持 HTML <template>元素，它提供了一种更可靠的方式来从字符串创建元素。见 Mark Amery's answer below for details .

对于较旧的浏览器和 node/jsdom:(在撰写本文时还不支持 <template> 元素)，请使用以下方法。这与库用来从 HTML 字符串中获取 DOM 元素的操作相同(with some extra work for IE 通过其实现 innerHTML 来解决错误):

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes.
  return div.firstChild;
}

请注意，与 HTML 模板不同，此不会适用于某些不能合法成为 <div> 子级的元素。 ，如 <td>秒。

如果您已经在使用库，我建议您坚持使用库认可的从 HTML 字符串创建元素的方法:

• Prototype 在其 update() method 中内置了此功能。 .
• jQuery 在它的 jQuery(html) 中实现了它。和 jQuery.parseHTML 方法。