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

Question

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

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

原文由 Omer Bokhari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

注意： 大多数当前浏览器都支持 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 字符串创建元素的方法：

• Prototype 在它的 update() 方法 中内置了这个特性。

• jQuery 在其 jQuery(html) 和 jQuery.parseHTML 方法中实现了它。

原文由 Crescent Fresh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

<template> 元素用于声明可在脚本中使用的 HTML 片段。该元素在 DOM 中表示为 HTMLTemplateElement 具有 .content 属性 DocumentFragment 模板的类型，以提供对模板内容的访问。 This means that you can convert an HTML string to DOM elements by setting the innerHTML of a <template> element, then reaching into the template ’s .content 财产。

例子：

 /**
 * @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 的直接子代。如果您尝试将 innerHTML 的 div 设置为包含它们，这将导致这些元素消失。由于 <template> 对其内容没有此类限制，因此使用模板时不存在此缺点。

但是，某些旧浏览器不支持 template 。截至 2021 年 4 月， Can I use… 估计 全球 96% 的用户正在使用支持 template s 的浏览器。特别是，没有任何版本的 Internet Explorer 支持它们； Microsoft 直到 Edge 发布后才实施 template 支持。

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

原文由 Mark Amery 发布，翻译遵循 CC BY-SA 4.0 许可协议