'<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;
}
createElementFromHTML这个函数名起得有误导性，因为div.firstChild返回的是一个Node而非HTMLElement，例如无法使用node.setAttribute。如果要创建一个Element，应该从函数中返回div.firstElementChild。 - Semmeldiv内部的SVG，输出结果是[object SVGSVGElement]，而控制台日志却给出了正确的DOM元素。我做错了什么？ - ed1nh0innerHTML 添加到 DOM 中的脚本标签将不会被执行。对于这些情况，最好使用 var script = document.createElement('script')，然后根据脚本是否内联使用 script.src 或 script.textContent。然后，使用 document.body.appendChild(script) 添加脚本。 - ethan.roday<template>元素，可用于此目的（现在已在WhatWG规范和MDN文档中描述）。<template> 元素用于声明可在脚本中使用的 HTML 片段。该元素在 DOM 中表示为 HTMLTemplateElement，它具有 .content 属性，类型为 DocumentFragment，以提供对模板内容的访问。这意味着您可以通过设置 <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。截至2021年4月，《Can I use...》估计全球96%的用户正在使用支持template的浏览器。特别是，任何版本的Internet Explorer都不支持它们；直到Edge发布之前，Microsoft才实现了template支持。html.trim去除空格的问题，而是由于innerHTML设置的内部解析。在我的情况下，它会删除作为textNode一部分的重要空格。 :-( - e-motivtemplate.content.firstElementChild来替代去除HTML。 - asyntshtmlToElements，但将最后一行改为 return template.content.childNodes.length == 1 ? template.content.firstChild : template.content.childNodes;，但我不建议这样做；对我来说，有一个通常返回集合但有时返回单个项的函数似乎很奇怪。 - Mark Amery使用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及以上版本的所有浏览器中使用。 - Jonas Äppelgranbeforebegin、afterbegin、beforeend、afterend。请参见 MDN 文章。 - Jonas Äppelgran无需进行任何微调，您已经拥有本地API：
const toNodes = html =>
new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]
<td>文本</td> 这样的 HTML。这是因为 DOMParser 试图解析完整的 HTML 文档，而并非所有元素都有效作为文档的根元素。 - Mark Amery<td>test</td>，div.innerHTML，DOMParser.parseFromString和range.createContextualFragment（没有正确的上下文），其他答案中提到的解决方案无法创建<td>元素。function parseHTML(html) {
var t = document.createElement('template');
t.innerHTML = html;
return t.content;
}
var documentFragment = parseHTML('<td>Test</td>');
新的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
innerHTML 应用于 div 的方法存在类似的缺点；例如，某些元素（如 td）将被忽略，因此不会出现在生成的分段中。 - Mark Amery您可以使用以下方法从字符串创建有效的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);new Range().createContextualFragment(htmlString)。 - mdre以下是一个简单的方法:
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);
我正在使用这种方法（适用于IE9+），尽管它无法解析<td>或其他一些无效的body子元素：
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>
我添加了一个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>");