3

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

如果没有 jquery ，我也可以做同样的事情，但dom.innerHTML = html;
我也发现$(sel).html()它比 慢dom.innerHTML，但为什么呢？

$(sel).html和 和有什么区别dom.innerHTML？
使用dom.innerHTML替换安全$(sel).html吗？

4

3 回答 3

10

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

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

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

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

实际上，如果.innerHTML直接在使用其他 jQuery 功能的元素的父元素上使用可能发生的内存泄漏通常不是问题。它们可能有意义的地方是，如果您有与元素关联的大型数据结构（例如 in .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>");
于 2012-12-27T08:19:31.333 回答
3

jQuery.innerHTML在后台使用，所以如果你已经有一个 DOM 元素，并且你不需要提供额外的功能，.html()那么你可以安全地.innerHTML直接使用。

于 2012-12-27T08:18:31.360 回答
3

正如 Jquery Docs 所说.html()

此方法使用浏览器的 innerHTML 属性。某些浏览器可能不会返回与原始文档中的 HTML 源完全相同的 HTML。例如，如果属性值仅包含字母数字字符，Internet Explorer 有时会省略属性值的引号。

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

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

于 2012-12-27T08:19:01.700 回答