javascript - 将 Html 从字符串解析为文档

Question

我正在尝试将 Html 代码从字符串解析为文档，并开始一次将每个节点附加到真实的 dom。 经过一些研究，我遇到了这个 api:

DOMImplementation.createHTMLDocument()

效果很好，但是如果某个节点有后代，我需要先追加该节点，并且只有在它进入真实的 dom 之后我才应该开始追加它的后代，我想我可以使用

document.importNode(externalNode, deep);

将 deep 值设置为 false 以便仅复制父节点。 所以我的方法适用于这种情况，我应该如何保留附加节点的顺序，这样我就不会两次附加相同的节点？ 还有一个问题是在某些情况下我需要将更多的 html 代码添加到特定位置(例如在某些 div 节点之后)并继续附加，知道如何正确地做到这一点吗？

Answer 1

您可以为此使用 DOMParser:

const parser = new DOMParser();
const doc = parser.parseFromString('<h1>Hello World</h1>', 'text/html');

document.body.appendChild(doc.documentElement);

但是如果你想多次附加相同的东西，使用模板会有更好的性能:

const template = document.createElement('template');
template.innerHTML = '<h1>Hello World</h1>';
const instance = template.cloneNode(true);
document.body.appendChild(instance.content);
const instance2 = template.cloneNode(true);
document.body.appendChild(instance2.content);

希望对你有帮助