为什么建议避免使用 .innerHTML？答案

【问题标题】：Why is it suggested to avoid .innerHTML?为什么建议避免使用 .innerHTML？
【发布时间】：2013-08-29 04:23:24
【问题描述】：

抱歉，我是 JavaScript 菜鸟，但谁能解释一下为什么不建议使用 .innerHTML。当我们以.innerHTML 的形式拥有更快更容易的东西时，我们为什么不使用它呢？

【问题讨论】：

谁说你不应该使用它？还有什么比什么更快？
innerHTML 在序列化数据之上工作，这不是 DOM 在概念上的工作方式。手动构建大块 HTML 时比较容易搞砸，因此更难维护。此外，在许多经验丰富的 JS 开发人员眼中，JS 中的 HTML 非常丑陋（当您看到一半的 JS 文件是 HTML 与 JavaScript 混合时，您肯定会这么想）。这就是我们拥有 JS 模板引擎以及 Angular 框架的原因。但是，是的，您可以将一些 HTML 放入 JS 中而不会出现功能问题（@Evan 回答的旧 IE 保存几个案例）。

【解决方案1】：

innerHTML 是一把大锤。它将炸开所选 DOM 元素的内容，并用当时分配的任何内容替换它们。这会导致许多 HTML 转义和验证问题。

更重要的是，对于绑定大量事件的页面，使用innerHTML追加另一个元素会重新生成DOM元素，这意味着事件绑定可能会丢失。

当从 DOM 中删除元素时，旧版本的 IE 中也存在一些内存泄漏问题。

说了这么多，我并不是要告诉你你不应该使用innerHTML。当我使用 $(selector).html() 时，我一直在 jQuery 中使用它。有时，大锤是完成这项工作的正确工具，当事件被正确委派时，重新加载多少内容并不重要。

【讨论】：