JavaScript使用内置的DOM方法或原型从HTML字符串创建新的DOM元素 提出问题

Question

我有一个表示元素的HTML字符串：'<li>text</li>'。我想将其附加到DOM中的元素上（ul以我为例）。如何使用Prototype或DOM方法做到这一点？

（我知道我可以在jQuery中轻松完成此操作，但不幸的是，我们没有使用jQuery。）

Answer 1

注意：当前大多数浏览器都支持HTML <template>元素，这些元素提供了一种更可靠的方式来从字符串创建元素。

对于较旧的浏览器和node / jsdom：（<template>在撰写本文时尚不支持元素），请使用以下方法。库用于从HTML字符串中获取DOM元素的操作是相同的（为IE实现，还需要一些额外的工作来解决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模板不同，这不适用于某些不能合法地为a的子元素的元素<div>，例如<td>。

如果你已经在使用库，建议你坚持使用库批准的从HTML字符串创建元素的方法：

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