Question

使用jQuery，我可以使用$(sel).html(html)生成一个html区域。

没有jquery，我可以通过dom.innerHTML = html;来做同样的事情我还发现$(sel).html()比dom.innerHTML慢，但为什么？

$(sel).html和dom.innerHTML之间的区别是什么？使用dom.innerHTML替换$(sel).html是否安全？

Answer 1

使用.html()设置HTML可提供一些适当的内务处理，以防止在使用其他jQuery功能之前内存泄漏，然后再设置.innerHTML。

例如，如果您对某个元素使用.data()并指定了.innerHTML所使用的对象的父级.data()，那么.html()将会清理与要替换的元素关联的.data()元素。如果您使用.innerHTML，则这些.data()元素将被孤立，并且在您离开页面之前永远不会被清除（短期内存泄漏）。对于与被删除对象上的事件处理程序相关联的一些jQuery数据也是如此。

在jQuery中编程最安全的方法是在删除使用jQuery的元素时使用.remove()和.html()（或其他类似的jQuery函数）而不是本机DOM函数。

.html()可能更慢，因为它做得更多（如果使用其他jQuery功能，其中一些是有利的。）

实际上，如果直接在已经使用其他jQuery功能的元素的父元素上使用.innerHTML，则可能发生的内存泄漏通常不是问题。它们可能有意义的地方是，如果您有一个与元素关联的大型数据结构（如.data()），或者您创建并销毁大量元素，或者您打算让您的页面运行非常很长一段时间（就像单页应用程序）。因此，如果您想要安全，那么您可以使用jQuery方法来处理任何可以删除或替换元素的方法。

以下是一个简单的内存泄漏示例：

<div id="container"><span id="whatever">foo</span></div>

$("#whatever").data("somedata", "really long string");
document.getElementById("container").innerHTML = "<span>new text</span>";

这会导致第一行代码中.data()信息集的泄漏，因为jQuery永远不会有机会清除与现在已经从DOM中删除的#whatever对象相关联的数据，但是jQuery从来没有看到你删除它。

然而，这不会以这种方式泄漏：

<div id="container"><span id="whatever">foo</span></div>

$("#whatever").data("somedata", "really long string");
$("#container").html("<span>new text</span>");

Answer 2

jQuery使用了.innerHTML，所以如果你已经有了一个DOM元素，并且你不需要.html()提供的extra features，那么你可以安全地使用{{1}直接。

Answer 3

正如Jquery Docs所说的关于.html()

此方法使用浏览器的innerHTML属性。有些浏览器可能不返回完全复制原始HTML源的HTML 文献。例如，Internet Explorer有时会离开如果属性值仅包含字母数字，则引用它们字符。

我认为它变得更慢，因为.html（）是更大的Jquery库的一部分，它可以让你做更多的事情。但在使用。innerHTML()和Jquery.html()的两种方法之间都可以。

http://api.jquery.com/html/

$（sel）.html和dom.innerHTML之间的区别

3 个答案: