我希望通过JavaScript将HTML注入到工作中。
我想知道的是，注入页面重写是否比使用getElementById()等方法在整个页面中注入片段更有效或更差。
例如：
document.getElementById("Example").innerHTML = '<h2 id="Example" name="Example">Text</H2>'
document.getElementsByClassName("Example").innerHTML = '<H1>Test</H1>'
。等。这是否比简单地从头到尾注入我自己的整个页面的HTML版本更有效/有效？
编辑：根据Lix的评论，我应该澄清一下，我可能会在页面中注入大量内容，但它在任何时候都会影响不超过十几个元素。
如果你的项目可以管理它，最好创建 DOM 元素并将它们附加到树中。
效率的最大问题是设置属性.innerHTML首先删除所有节点，然后才解析 html 并将其附加到 DOM。
很明显，您应该避免删除和重新附加相同的元素，因此，如果您确定"Example"元素将始终保留在页面上，那么您设置它们的方式似乎是一个很好的优化。
如果你想进一步优化它，你可以解析你想要附加到节点的html，并有一个函数来检查哪些应该附加，哪些不应该。但请注意，访问 DOM 的成本很高。阅读有关 ECMA-DOM 桥的更多信息。
编辑：在某些情况下，最好让浏览器通过innerHTML进行 html 解析和注入。这取决于您插入的 HTML 数量和要删除的数量。参见@Nelson Menezes关于innerHTML与append的评论。
取决于上下文。如果只是对现有内容的装饰，那么您的建议就足够了。无论如何，我都会使用jQuery，但这只是我的偏好。
但是在注入实际内容时，您有两个问题：
- 可维护性 - 使代码的结构可读，并在需要时(并且需要)轻松更改。
- 可访问性 - 禁用 JavaScript 后，将完全看不到任何内容。您应该在标记中提供指向所需内容的链接
<noscript/>或确保每个人都可以通过您喜欢的任何其他方式访问。目前，这只是互联网用户的少数，但对于专业的网站管理员来说，他们把它计算在内。
为了解决上述两个问题，我更喜欢使用 ajax 将整个页面、某些部分甚至明文加载到现有元素中。它使它具有可读性，因为内容位于另一个与脚本完全分离的文件中。由于它是一个文件，当javascript被禁用时，你可以直接重定向到它。它使任何人都可以访问内容。
对于纯JavaScript，您必须使用XMLHttpRequest对象，就像这里一样。 使用jQuery，它甚至更简单。根据你的需要，你可以使用.load，.get或.ajax。
今天的最佳实践是使用 JQuery 操作函数。
大多数情况下，您会使用以下 3 个函数之一：
-
替换现有的 HTML 节点：
$("div").html("新内容");
-
附加同级节点：
$(">div").append("新内容");
-
删除节点：
$("div").remove();