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

Question

很抱歉我不太懂JavaScript，但可以请问为什么不建议使用 .innerHTML 呢？既然有更快更简便的方法，为什么不能使用它呢？

- heretolearn

---

谁说你不应该使用它？什么比什么更快？ - Steve

innerHTML 基于序列化数据工作，这不是 DOM 的概念工作方式。手动构建大块 HTML 时很容易出错，因此难以维护。此外，许多经验丰富的 JS 开发人员认为 JS 中的 HTML 非常丑陋（当您看到一半的 JS 文件被混合了 JavaScript 和 HTML 时，您肯定会有同样的想法）。这就是为什么我们有 JS 模板引擎和 Angular 框架的原因。但是，是的，您可以在 JS 中放置一些 HTML，而无需考虑功能方面的问题（除了一些旧 IE 的情况，如 @Evan 所回答的那样）。 - Fabrício Matté

Answer 1

innerHTML 是一种很粗暴的方法。它会清空选定 DOM 元素的内容，并用任何已分配的内容替换它们。这可能导致许多HTML转义和验证问题。

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

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

---

尽管如此，我并不是告诉您不应该使用 innerHTML。当我在 jQuery 中使用 $(selector).html() 时，我经常使用它。有时候，粗暴方法确实是解决问题的正确方法，而当事件正确委托时，不论内容如何被重新加载，都不会有问题。

- zzzzBov

---

+1，我差点忘记了那些尝试使用 element.innerHTML += ... 的人，然后注意到该元素的后代的所有事件处理程序/关联小部件都已被破坏。 - Fabrício Matté

我记得Resig为了解决内部html性能差异而对各种浏览器做了一些黑科技。我猜这更加说明使用包装器的必要性。 - Adam Gent

+1，我喜欢这个大锤的比喻。如果你知道如何正确使用innerHTML，你可以节省很多时间...只要你不需要做巧妙的工作。就像锤子一样。 - Steve