Question

我希望通过JavaScript将HTML注入工作页面。

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

例如：

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

...等。这比仅仅注入我自己版本的整个页面的HTML开始更有效/有效吗？

编辑： Per Lix的评论，我应该澄清一下，我可能会在页面中注入大量内容，但它会随时影响不超过十几个元素。

Answer 1

如果您的项目可以管理它，那么create DOM Elements and append them to the tree可能会更好。

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

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

如果你想进一步优化它，你可以解析你想要附加到节点的html，并有一个函数来检查应该追加哪些，哪些不应该。但请注意，访问DOM的成本很高。详细了解ECMA-DOM bridge。

编辑：在某些情况下，让浏览器执行html解析并通过innerHTML进行注入可能会更好。这取决于您插入的HTML数量以及您要删除的数量。请参阅 @Nelson Menezes 关于innerHTML与追加的评论。

Answer 2

取决于具体情况。如果它只是现有内容的装饰，那么您的建议就足够了。无论如何我会使用jQuery，但这只是我的偏好。

但是在注入实际内容时，您有两个问题：

可维护性 - 使您的代码结构易读，并在需要时（您需要）轻松更改。
辅助功能 - 当禁用javascript时，根本不会显示任何内容。您应该在<noscript/>标记中提供指向所需内容的链接，或者以您喜欢的任何其他方式确保所有人都可以访问。目前这只是少数互联网用户，但对于专业的网站管理员而言，他们认为这很重要。

为了解决上述两个问题，我更喜欢使用ajax将整个页面，某些部分甚至明文加载到现有元素中。它使其可读，因为内容位于与脚本完全分离的另一个文件中。由于它是一个文件，您可以在禁用javascript时直接重定向到该文件。它使任何人都可以访问内容。

对于纯JavaScript，您必须使用XMLHttpRequest对象，例如here。使用jQuery它甚至更简单。根据您的需要，您可以使用.load，.get或.ajax。

Answer 3

今天的最佳做法是使用JQuery Manipulation functions。

大多数时候你会使用这3个功能中的一个：

替换现有的HTML节点：

$（“div”）。html（“新内容”）;
附加一个兄弟节点：

$（“div”）。append（“New content”）;
删除节点：

$（ “DIV”）除去（）;

JavaScript HTML注入效率/最佳实践

3 个答案: