我有一个表示元素的HTML字符串：“<li>text</li>”。我想将它附加到DOM中的一个元素（在我的例子中是一个ul）。如何使用Prototype或DOM方法做到这一点？
（我知道我可以在jQuery中轻松做到这一点，但不幸的是，我们没有使用jQuery。）
当前回答
这里有一个简单的方法：
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);
其他回答
这也会奏效：
$('<li>').text('hello').appendTo('#mylist');
它感觉更像是一种带有链式函数调用的jquery方式。
从字符串渲染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=”非常慢：/
无需任何调整，您获得了一个本地API：
const toNodes = html =>
new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]
var msg=“测试”jQuery.parseHTML（消息）
HTML5和ES6
<模板>
Demo
“使用严格”；/****@作者xgqfrms*@许可证MIT*@版权xgqfrms*@description HTML5模板*@扩增*@示例**//*<模板><h2>鲜花</h2><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><模板><div class=“myClass”>我喜欢：</div></template>*/常量showContent=（）=>{//let temp=document.getElementsByTagName（“template”）[0]，let temp=document.querySelector（`[data tempalte=“tempalte img”]`），clone=临时内容克隆节点（true）；document.body.appendChild（克隆）；};const templateGenerator=（datas=[]，debug=false）=>{让result=``；//let temp=document.getElementsByTagName（“template”）[1]，let temp=document.querySelector（`[data tempalte=“tempalte links”]`），item=temp.content.querySelector（“div”）；for（设i=0；i<data.length；i++）{let a=document.importNode（item，true）；a.textContent+=数据[i]；document.body.appendChild（a）；}返回结果；};const arr=[“奥迪”、“宝马”、“福特”、“本田”、“捷豹”、“日产”]；if（document.createElement（“template”）.content）{console.log（“是！浏览器支持模板元素”）；模板生成器（arr）；setTimeout（（）=>{showContent（）；}, 0);}其他{console.error（“否！浏览器不支持模板元素”）；}@字符集“UTf-8”；/*测试.css*/：根目录{--颜色：#000；--默认cololr:#fff；--新的cololr:#0f0；}[数据class=“links”]{颜色：白色；背景色：道奇蓝；填充：20px；文本对齐：居中；边距：10px；}<!DOCTYPE html><html lang=“zh-Hans”><head><meta charset=“UTF-8”><meta name=“viewport”content=“width=设备宽度，初始比例=1.0”><meta http equiv=“X-UA-Compatible”content=“ie=edge”><title>模板测试</title><!--[如果lt IE 9]><script src=“https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js“></script><![endif]--></head><body><章节><h1>模板测试</h1></section><template data tempalte=“tempalte img”><h3>花卉图像</h3><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><template data tempalte=“tempalte links”><h3>链接</h3>我喜欢：</div></template><!-- js--></body></html>
