我有一个表示元素的HTML字符串：“<li>text</li>”。我想将它附加到DOM中的一个元素（在我的例子中是一个ul）。如何使用Prototype或DOM方法做到这一点？
（我知道我可以在jQuery中轻松做到这一点，但不幸的是，我们没有使用jQuery。）
当前回答
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);
其他回答
注意：大多数当前浏览器都支持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＞s）不起作用。
如果您已经在使用一个库，我建议您坚持使用库批准的方法，从HTML字符串创建元素：
原型在其update（）方法中内置了此功能。jQuery在其jQuery（html）和jQuery.parseHTML方法中实现了它。
以下是如何使用PrototypeJS（正如OP 12年前最初要求的那样）：
HTML格式：
<ul id="mylist"></ul>
JS:
$('mylist').insert('<li>text</li>');
注意，这不是jQuery！
可以使用以下方法从字符串创建有效的DOM节点：
document.createRange（）.createContextualFragment（）
以下示例在页面中添加一个按钮元素，从字符串中获取标记：
让html='<button type=“button”>单击我</按钮>'；let fragmentFromString=函数（strHTML）{return document.createRange（）.createContextualFragment（strHTML）；}let fragment=fragmentFromString（html）；document.body.appendChild（片段）；
实际上，我想我会分享我想出的这个过于复杂但又简单的方法。。。也许有人会发现有用的东西。
/*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')"
}));
从字符串渲染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};
};
在这里，您可以检查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=”非常慢：/
