我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?

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


当前回答

无需任何调整,您获得了一个本地API:

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

其他回答

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>

答复

创建模板将模板的innerHTML设置为strim.trim()创建模板的子级数组返回子项、子项或

函数toElement(s=“”,c,t=document.createElement('template'),l='length'){t.innerHTML=s.trim();c=[…t.content.childNodes];返回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><span>嵌套</span><span>填充</span></div>'));

这是我的代码,它有效:

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

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

var msg=“测试”jQuery.parseHTML(消息)

使用insertAdjacentHTML()。它适用于所有当前浏览器,即使是IE11。

var mylist=文档.getElementById('mylist');mylist.insertAdjacentHTML('beforeend','<li>third</li>');<ul id=“mylist”><li>第一个</li><li>第二个</li></ul>