JavaScript HTML 注入(inject)效率/最佳实践

Question

我正在寻找通过 JavaScript 将 HTML 注入(inject)工作页面的方法。

我想知道的是，注入(inject)重写页面是否比使用 getElementById() 等方法在整个页面中注入(inject)片段更有效或更不有效。

例如:

document.getElementById("Example").innerHTML = '<h2 id="Example" name="Example">Text</H2>'
document.getElementsByClassName("Example").innerHTML = '<H1>Test</H1>'

...等等这比从头到尾简单地注入(inject)我自己的整个页面 HTML 版本更有效吗？

编辑:根据 Lix 的评论，我应该澄清一下，我可能会向页面中注入(inject)大量内容，但它在任何时候都会影响不超过十几个元素。

Answer 1

如果您的项目可以管理它，最好create DOM Elements and append them to the tree .

效率的大问题是设置 .innerHTML 属性将首先删除所有节点，然后才解析 html 并将其附加到 DOM。

很明显，您应该避免删除和重新附加相同的元素，因此如果您确定 "Example" 元素将始终保留在页面上，那么您设置它们的方式似乎是一个很好的优化。

如果你想进一步优化它，你可以解析你想附加到节点的 html，并有一个函数来检查哪些应该附加，哪些不应该附加。但请注意，访问 DOM 的成本很高。阅读更多关于 ECMA-DOM bridge 的信息.

编辑:在某些情况下，让浏览器通过 innerHTML 进行 html 解析和注入(inject)可能会更好。这取决于您插入的 HTML 数量和您删除的数量。请参阅 @Nelson Menezes 关于 innerHTML 与 append 的评论。