$（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/