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

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

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

答案

注意：当前大多数浏览器都支持 HTML <template>元素，该元素提供了一种更可靠的方式来转换从字符串创建元素的方式。有关详细信息，请参见下面的 Mark Amery 的答案。

对于较旧的浏览器和 node / jsdom ：（在撰写本文时尚不支持<template>元素），请使用以下方法。库用于从 HTML 字符串中获取 DOM 元素的方法是相同的（ 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 字符串创建元素的方法：

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

HTML 5 引入了可用于此目的<template> 元素（如 WhatWG 规范和MDN 文档中所述）。

<template>元素用于声明可在脚本中使用的 HTML 片段。该元素在 DOM 中表示为HTMLTemplateElement ， DocumentFragment .content属性，以提供对模板内容的访问。 <template> innerHTML ，然后进入template的.content属性，将 HTML 字符串转换为 DOM 元素。

例子：

/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

var td = htmlToElement('<td>foo</td>'),
    div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/**
 * @param {String} HTML representing any number of sibling elements
 * @return {NodeList} 
 */
function htmlToElements(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');

请注意，使用不同容器元素（例如div类似方法效果不佳。 HTML 对允许哪些元素类型存在于其他元素类型中有限制；例如，您不能将td div的直接子对象。 div innerHTML设置为包含这些元素，则这些元素将消失。由于<template>对其内容没有任何限制，因此使用模板时，此缺点不适用。

但是，某些旧的浏览器不支持template截至 2018 年 1 月，我可以使用...估计全球 90％的用户正在使用支持template s的浏览器。特别是，Internet Explorer 的任何版本都不支持它们。直到 Edge 发行，Microsoft 才实现template

如果您很幸运地编写了仅针对现代浏览器用户的代码，请立即使用它们。否则，您可能需要等待一段时间才能赶上用户。

使用insertAdjacentHTML（）。它适用于当前所有浏览器，甚至 IE11。

var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

<ul id="mylist">
 <li>first</li>
 <li>second</li>
</ul>