【问题标题】：使用内置 DOM 方法或 Prototype 从 HTML 字符串创建新的 DOM 元素
【发布时间】：2010-10-04 09:28:57
【问题描述】：

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

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

【问题讨论】：

抱歉，您到底想完成什么？ HTML 字符串 -> dom 元素？
不幸的是，这些解决方案是如此间接。我希望标准委员会能指定类似的内容：var nodes = document.fromString("<b>Hello</b> <br>");
我在上面遇到了问题，因为我有需要传递的属性，我不想解析它们：“
" 所以，我简单地使用了：$("
")

【解决方案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>s。

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

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

【讨论】：

如何在不使用这种不安全的 innerHTML 赋值的情况下使用 jQuery 将 innerHTML 设置为创建的 div (div.innerHTML = "some value")
函数名称 createElementFromHTML 具有误导性，因为 div.firstChild 返回的 Node 不是 HTMLElement，例如不能node.setAttribute。要创建 Element，请从函数返回 div.firstElementChild。
谢谢，我用 .innerHTML 添加的 HTML 包装的 <div> 让我很烦。我从没想过使用.firstChild。
注意，顺便说一下，这不适用于脚本标签。使用 innerHTML 添加到 DOM 的脚本标签将不会被执行。对于这些情况，最好使用var script = document.createElement('script')，然后根据脚本是否内联使用script.src 或script.textContent。然后，使用document.body.appendChild(script) 添加脚本。
我会使用 firstElementChild 而不是 firstChild （参见w3schools.com/jsref/prop_element_firstelementchild.asp ），因为如果模板的前面或结尾有空格，则 firstChild 将返回空的 textNode

【解决方案2】：

HTML 5 引入了可用于此目的的<template> 元素（现在在WhatWG spec 和MDN docs 中进行了描述）。

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

请注意，use a different container element such as a div 的类似方法不太适用。 HTML 对允许哪些元素类型存在于哪些其他元素类型中有限制；例如，您不能将td 作为div 的直接子代。如果您尝试将innerHTML 的innerHTML 设置为包含它们，这会导致这些元素消失。由于<template>s 对他们的内容没有这样的限制，所以这个缺点在使用模板时并不适用。

但是，某些旧浏览器不支持template。截至 2021 年 4 月，我可以使用...估计 96% of users globally are using a browser that supports templates。特别是，没有任何版本的 Internet Explorer 支持它们；微软直到 Edge 发布才实现template 支持。

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

【讨论】：

这是一种有效的方法，而且非常干净；但是，（至少在 Chrome 50 中）这会破坏脚本标记处理。换句话说，使用此方法创建脚本标记，然后将其附加到文档（正文或头部）不会导致对标记进行评估，因此会阻止脚本执行。（如果在附加时进行评估，这可能是设计使然；我不能肯定地说。）
可爱！您甚至可以通过执行以下操作来查询元素： template.content.querySelector("img");
我没有看到 innerHTML 在 MDN 上被定义为 DOM 片段对象的属性（来自 <template>.content）：developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
@Dai 确实不是，因为没有这样的属性。你误读了我的回答；我设置了模板本身的innerHTML（这是一个Element），而不是它的.content（这是一个DocumentFragment）。
它有一个问题。如果你有一个标签，在开始或结束处有空格（！），它们将被删除！不要误会我的意思，这与html.trim 删除的空格无关，而是通过对 innerHTML 设置的内部解析。在我的情况下，它删除了作为 textNode 一部分的重要空格。 :-(

【解决方案3】：

使用insertAdjacentHTML()。它适用于所有当前的浏览器，甚至适用于 IE11。

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

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

【讨论】：

首先，insertAdjacentHTML 适用于自 IE 4.0 以来的所有浏览器。
第二，太棒了！与innerHTML += ... 相比，一个很大的优势是使用此方法对先前元素的引用仍然完好无损。
第三，第一个参数的可能值为：beforebegin，afterbegin，beforeend，afterend。请参阅 MDN 文章。
太糟糕了，它没有将插入的 HTML 作为元素返回
这具有出色的浏览器支持，而且非常简单。创建一个虚拟元素只是为了获取它的子节点并不奇怪。

【解决方案4】：

无需任何调整，您有一个原生 API：

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

【讨论】：

这与公认的答案存在相同的主要缺点 - 它会像 <td>text</td> 一样破坏 HTML。这是因为DOMParser 正在尝试解析完整的 HTML 文档，并且并非所有元素都可以作为文档的根元素。
-1 因为这是an earlier answer 的副本，它明确指出了我在上面的评论中提到的缺点。
@MarkAmery 没关系。这个答案和语法被塑造成我们今天习惯看到的样子。如果它展示了一种更现代的写作方式，那么它永远不会是一个糟糕的复制品。
不能通过包装在 HTML 根元素中并提取 firstChild 来修改它以使用片段吗？

【解决方案5】：

较新的 DOM 实现具有 range.createContextualFragment，它以独立于框架的方式执行您想要的操作。

它得到了广泛的支持。不过可以肯定的是，请在同一个 MDN 链接中检查其兼容性，因为它会发生变化。截至 2017 年 5 月，情况如下：

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

【讨论】：

请注意，这与设置 div 的 innerHTML 有类似的缺点；某些元素，例如tds，将被忽略并且不会出现在结果片段中。
“有报道称桌面版 Safari 曾一度支持 Range.createContextualFragment()，但至少在 Safari 9.0 和 9.1 中不支持。” （答案中的 MDN 链接）

【解决方案6】：

对于此处其他答案中提到的某些 html 片段，例如 <td>test</td>、div.innerHTML、DOMParser.parseFromString 和 range.createContextualFragment（没有正确的上下文）解决方案，不会创建 <td> 元素。

jQuery.parseHTML() 正确处理它们（我提取了可用于非 jquery 代码库的jQuery 2's parseHTML function into an independent function）。

如果你只支持 Edge 13+，只使用 HTML5 模板标签会更简单：

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content;
}

var documentFragment = parseHTML('<td>Test</td>');

【讨论】：

【解决方案7】：

这是一个简单的方法：

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);

【讨论】：

@MarkAmery 不同之处在于他使用片段允许在 DOM 中附加多个根元素，这是一个额外的好处。如果只有威廉确实提到这是他的答案...

【解决方案8】：

您可以使用以下方法从字符串创建有效的 DOM 节点：

document.createRange().createContextualFragment()

以下示例在页面中添加一个按钮元素，从字符串中获取标记：

let html = '<button type="button">Click Me!</button>';
let fragmentFromString = function (strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}
let fragment = fragmentFromString(html);
document.body.appendChild(fragment);

【讨论】：

即使这会创建一个 DocumentFragment 对象，它仍然 - 令我惊讶的是 - 与公认的答案存在相同的缺陷：如果你这样做 document.createRange().createContextualFragment('<td>bla</td>')，你会得到一个片段，它只包含文本 'bla' 而没有 <td> 元素。或者至少，这就是我在 Chrome 63 中观察到的；我还没有深入研究规范以确定它是否是正确行为。

【解决方案9】：

我正在使用这种方法（适用于 IE9+），虽然它不会解析 <td> 或其他一些无效的直接子代：

function stringToEl(string) {
    var parser = new DOMParser(),
        content = 'text/html',
        DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}

stringToEl('<li>text</li>'); //OUTPUT: <li>text</li>

【讨论】：

【解决方案10】：

为什么不用原生js呢？

    var s="<span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'>From <strong>Dan's Tools</strong></span>"
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=r.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

【讨论】：

到目前为止答案很好
太棒了！！然后可以轻松使用node.appendChild(e)
当你意识到原生解决方案是最简单的那一刻-->无价的^_^

【解决方案11】：

为了进一步增强我们可以在不同地方找到的有用的 .toDOM() sn-p，我们现在可以安全地使用 反引号 (template literals)。

所以我们可以在 foo html 声明中使用单引号和双引号。

对于熟悉该术语的人来说，这类似于heredocs。

这可以通过变量进一步增强，以制作复杂的模板：

模板文字用反引号 (`) 括起来（重音符号）字符而不是双引号或单引号。模板文字可以包含占位符。这些由美元符号和卷曲表示大括号（${表达式}）。占位符中的表达式和它们之间的文本被传递给一个函数。默认功能只是将部分连接成一个字符串。如果有表达式在模板文字（此处为标记）之前，这称为“标记模板”。在这种情况下，标签表达式（通常是一个函数）得到使用处理后的模板文字调用，然后您可以在输出之前进行操作。在模板中转义反引号字面意思，在反引号前加一个反斜杠 \。

String.prototype.toDOM=function(){
  var d=document,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment()
  a.innerHTML = this
  while(i=a.firstChild)b.appendChild(i)
  return b
}

// Using template literals
var a = 10, b = 5
var foo=`
<img 
  onclick="alert('The future starts today!')"   
  src='//placekitten.com/100/100'>
foo${a + b}
  <i>bar</i>
    <hr>`.toDOM();
document.body.appendChild(foo);

img {cursor: crosshair}

那么，为什么不直接使用.innerHTML += 呢？这样一来，浏览器会重新计算整个 DOM，速度会慢很多。

https://caniuse.com/template-literals

【讨论】：

支持模板文字的浏览器不也支持<template> 元素吗？那会更加灵活。
对，template 现在得到了很大的支持。但是对于新鲜的 html 元素（来自动态数据），每次修改 DOM 时，都会重新计算整个 DOM，元素很多，这会挂起浏览器的响应性。因此预先构建 DOM 更合适，就像使用 document. createElement 一样。关于在速度较慢的旧机器或智能手机上测试我们的应用程序非常棒，差异更加明显。实现同一件事的方法有很多，一个只是一种 hack，看起来对大量数据很有效，只允许简单地从纯 js 构建页面。

【解决方案12】：

回答

创建Template
将Template's innerHTML 设置为您的string .trim()
创建一个Array 的Template's 孩子
返回children、child或

function toElement(s='',c,t=document.createElement('template'),l='length'){
t.innerHTML=s.trim();c=[...t.content.childNodes];return c[l]>1?c:c[0]||'';}



console.log(toElement());
console.log(toElement(''));
console.log(toElement('    '));
console.log(toElement('<td>With td</td>'));
console.log(toElement('<tr><td>With t</td></tr>'));
console.log(toElement('<tr><td>foo</td></tr><tr><td>bar</td></tr>'));
console.log(toElement('<div><span>nested</span> <span>stuff</span></div>'));

【讨论】：

【解决方案13】：

以下是使用PrototypeJS 的方法（正如 OP 12 年前最初要求的那样）：

HTML：

<ul id="mylist"></ul>

JS：

$('mylist').insert('<li>text</li>');

请注意，这不是 jQuery！

【讨论】：

这是 jQuery 吗？还是 JS？
@JuanHurtado 这是使用 PrototypeJs 作为 OP 大约 11 年前要求的 ;)
@PabloBorowicz 哎呀，你是对的。我的思绪自动转到“内置 dom 方法”，我错过了原型部分。

【解决方案14】：

HTML5 & ES6

<template>

演示

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

<template>
    <h2>Flower</h2>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>


<template>
    <div class="myClass">I like: </div>
</template>

*/

const showContent = () => {
    // let temp = document.getElementsByTagName("template")[0],
    let temp = document.querySelector(`[data-tempalte="tempalte-img"]`),
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) => {
    let result = ``;
    // let temp = document.getElementsByTagName("template")[1],
    let temp = document.querySelector(`[data-tempalte="tempalte-links"]`),
        item = temp.content.querySelector("div");
    for (let i = 0; i < datas.length; i++) {
        let a = document.importNode(item, true);
        a.textContent += datas[i];
        document.body.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

@charset "UTf-8";

/* test.css */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Template Test</title>
    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <section>
        <h1>Template Test</h1>
    </section>
    <template data-tempalte="tempalte-img">
        <h3>Flower Image</h3>
        <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
    </template>
    <template data-tempalte="tempalte-links">
        <h3>links</h3>
        <div data-class="links">I like: </div>
    </template>
    <!-- js -->
</body>

</html>

【讨论】：

【解决方案15】：

我添加了一个 Document 原型，它从字符串创建一个元素：

Document.prototype.createElementFromString = function (str) {
   const element = new DOMParser().parseFromString(str, 'text/html');
   const child = element.documentElement.querySelector('body').firstChild;
   return child;
};

用法：

document.createElementFromString("<h1>Hello World!</h1>");

【讨论】：

请注意 - 正如 elsewhere on this page 指出的那样 - 这不适用于 tds。

【解决方案16】：

迟到但只是作为一个注释；

可以将一个平凡的元素作为容器添加到目标元素中，并在使用后将其删除。

// 在 chrome 23.0、firefox 18.0 即 7-8-9 和 opera 12.11 上测试。

<div id="div"></div>

<script>
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
                    '<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
                    '<hr size="1" />'
    // Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
        // Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
    // Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

【讨论】：

【解决方案17】：

这是我的代码，它可以工作：

function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}

【讨论】：

如果要创建的元素本身就是一个表，则失败。

【解决方案18】：

从字符串渲染 DOM 的最快解决方案：

let render = (relEl, tpl, parse = true) => {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};

here 你可以检查 DOM 操作 React 与原生 JS 的性能

现在你可以简单地使用：

let element = render(document.body, `
<div style="font-size:120%;line-height:140%">
  <p class="bold">New DOM</p>
</div>
`);

当然，在不久的将来，你会使用内存中的引用，因为 var "element" 是你在文档中新创建的 DOM。

记住“innerHTML=”非常慢：/

【讨论】：

【解决方案19】：

为了它，我想我会分享这个我想出的复杂但简单的方法......也许有人会发现一些有用的东西。

/*Creates a new element - By Jamin Szczesny*/
function _new(args){
    ele = document.createElement(args.node);
    delete args.node;
    for(x in args){ 
        if(typeof ele[x]==='string'){
            ele[x] = args[x];
        }else{
            ele.setAttribute(x, args[x]);
        }
    }
    return ele;
}

/*You would 'simply' use it like this*/

$('body')[0].appendChild(_new({
    node:'div',
    id:'my-div',
    style:'position:absolute; left:100px; top:100px;'+
          'width:100px; height:100px; border:2px solid red;'+
          'cursor:pointer; background-color:HoneyDew',
    innerHTML:'My newly created div element!',
    value:'for example only',
    onclick:"alert('yay')"
}));

【讨论】：

为了记录，我试了一下这个代码 - 它真是太棒了。我认为这将成为我从 json 动态创建 html 的首选方式 - 非常感谢队友！

【解决方案20】：

你可以使用 DOM 解析器：

const parser = new DOMParser();
const htmlString = "<strong>Beware of the leopard</strong>";
const doc3 = parser.parseFromString(htmlString, "text/html");

Reference

【讨论】：

【解决方案21】：

我已经从这篇文章中链接了。^{(Converting HTML string into DOM elements?)}

对我来说，我想找到一种将字符串转换为 HTML 元素的方法。如果你也有这个需求，可以试试下面的

const frag = document.createRange().createContextualFragment(
`<a href="/link.js">js</a> 
 <a>go</a>
`
) 
const aCollection = frag.querySelectorAll("a")
for (let [key, a] of Object.entries(aCollection)) {
  console.log(a.getAttribute("href"), a.textContent)
}

【讨论】：

【解决方案22】：

我自己对此进行了很多搜索，发现了这个简洁的解决方案。

const stringToHTML = (str) => {
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};

我想转换的字符串：

'<iframe src="https://player.vimeo.com/video/578680903?h=ea840f9223&amp;app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Total Body Balance"></iframe>'

结果：

<body><iframe src="https://player.vimeo.com/video/578680903?h=ea840f9223&amp;app_id=122963" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen="" title="Total Body Balance"></iframe></body>

【讨论】：

【解决方案23】：

function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "<div class='foo'>foo</div>";
domify(str);

【讨论】：

【解决方案24】：

您可以使用以下函数将文本“HTML”转换为元素

function htmlToElement(html)
{
  var element = document.createElement('div');
  element.innerHTML = html;
  return(element);
}
var html="<li>text and html</li>";
var e=htmlToElement(html);

【讨论】：

-1;这与接受的答案中提出的技术相同，并且具有相同的缺点 - 特别是不适用于tds。

【解决方案25】：

这是我的工作代码

我想将 'Text' 字符串转换为 HTML 元素

var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;

【讨论】：

什么是wwww？

【解决方案26】：

var msg = "测试" jQuery.parseHTML(msg)

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案27】：

var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

使用jnerator

【讨论】：

【解决方案28】：

这也可以：

$('<li>').text('hello').appendTo('#mylist');

感觉更像是一种带有链式函数调用的 jquery 方式。

【讨论】：

感觉像 jQuery，因为它是 jQuery？
最后一行太搞笑了！