JavaScript HTML注入效率/最佳实践

Question

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

我想知道的是，与使用getElementById()类的方法在整个页面中插入摘要相比，注入页面重写是否更有效或更有效。

例如：

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

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

编辑：根据Lix的评论，我应该澄清一下，我很可能会将大量内容注入到页面中，但是在任何时候都不会影响十几个元素。

Answer 1

如果您的项目可以管理它，那么创建DOM Elements并将它们附加到tree可能更好。

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

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

如果要进一步优化它，可以解析要附加到节点的html，并具有一个功能，该功能可以检查应该附加哪些，不应该附加哪些。 但是请注意，访问DOM的成本很高。 阅读有关ECMA-DOM桥的更多信息。

编辑：在某些情况下，最好让浏览器通过innerHTML进行html解析和注入。 这取决于您要插入的HTML的数量和要删除的HTML的数量。 参见@Nelson Menezes关于innerHTML与append的评论。

Answer 2

取决于上下文。 如果仅是对现有内容的修饰，那么您的建议就足够了。 无论如何，我都会使用jQuery，但这只是我的偏爱。

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

• 可维护性-使代码的结构易读，并在需要时（并且将需要）易于更改。
• 可访问性-禁用javascript时，所有内容都将不可见。 您应该在<noscript/>标记中提供所需内容的链接，或确保以任何其他您喜欢的方式对所有人进行访问。 目前，这是少数互联网用户，但对于专业的网站管理员来说，这很重要。

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

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

Answer 3

今天的最佳实践是使用JQuery Manipulation函数 。

大多数时候，您会使用以下三个功能之一：

1. 替换现有的HTML节点：

   $（“ div”）。html（“新内容”）;

2. 追加同级节点：

   $（“ div”）。append（“ New content”）;

3. 删除节点：

   $（“ div”）。remove（）;