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

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中删除的任何对象相关的数据，但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元素，你不需要extra features这.html()提供，那么你可以放心地直接使用.innerHTML。

Answer 3

为jQuery的文件说，有关.html()

这种方法使用浏览器的innerHTML属性。某些浏览器可能不会返回原始 文档中完全复制HTML源代码的HTML。例如，如果Internet Explorer仅包含字母数字字符 ，则有时会在属性值附近引用 引号。

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

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