Question

我正在寻找处理解析HTML或XHTML（XML序列化）标记并将其插入到网页DOM中的最佳方法，该网页可以是text / html或application / xhtml + xml。不希望使用像jQuery这样的库，而只关心与最新版Chrome的兼容性。

我看到两种可能的解决方案。

模板＆amp;的innerHTML：

let temp = document.createElement('template');
temp.innerHTML = markuptext;
document.body.appendChild(temp.content);

的DOMParser：

let parser = new DOMParser();
let doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + markuptext + '</div>', 'application/xhtml+xml');
let frag = document.createDocumentFragment(), childNode;
while (childNode = doc.documentElement.firstChild) {
    frag.appendChild(childNode);
}
document.body.appendChild(frag);

我希望有人能指出这两种方法的优点/缺点。

使用模板＆amp; innerHTML我假设Chrome会根据页面的内容类型选择解析为HTML / XML，并且可能无法改变它。看来模板＆amp; innerHTML允许<tr><td></td></tr>之外的<tbody>之类的片段，无论它是否正在解析为HTML或XML。 DOMParser也允许这样做，但如果它正在解析为XML，那么仅。

Answer 1

这取决于你的目标。如果你只想按原样添加解析后的html / xhtml，那么请使用.innerHTML，它更容易，通常更快。 Hovewer，根据我的经验，你经常需要进行某种转换，然后使用dom操作是最好的方法。但是你应该避免逐个节点地将文件添加到循环中的document.body，因为它很慢且效率低，只需创建一些'哑'dom元素，在循环中添加节点，而不是追加整个对象：

let div = document.createElement('div');
let childNode;
while (childNode = doc.documentElement.firstChild) {
    div.appendChild(childNode);
}
document.body.appendChild(div);

关于尝试在JS中找到最有效的解决方案的一个重要注意事项。 JS性能高度依赖于javascript引擎，js的哪些部分将在未来进行优化。因此，您应该始终编写某种性能测试（或使用准备好的测试套件），尤其是关于DOM API等慢速“部件”。好消息是引擎开发人员倾向于支持众所周知的解决方案和“良好实践”进行优化，他们通常会留下“不良部分”。

以下是关于innerHTML与DOM追加的一些好的测试： http://andrew.hedges.name/experiments/innerhtml/

在不创建“虚拟”div的情况下附加到DOm： https://coderwall.com/p/o9ws2g/why-you-should-always-append-dom-elements-using-documentfragments

关于.innerHTML，.appendChild，.insertAdjacentHTML的更多技术解释“ "innerHTML += ..." vs "appendChild(txtNode)"

Answer 2

在此页面上，他们建议第一个解决方案是：

ChildDialog

https://developers.google.com/web/fundamentals/web-components/customelements

Answer 3

也许是混合方式？

var dom = new DOMParser().parseFromString('<template>'+ markuptext +'</template>','text/html').head;
document.getElementById('my-div').appendChild(dom.firstElementChild.content);

DOMParser与模板和优势的优势的innerHTML

3 个答案: