[JS][jQuery]清空元素html(&quot;&quot;)、innerHTML=&quot;&quot; 與 empty()的區別：關於內容泄露問題，jqueryinnerhtml

[JS][jQuery]清空元素html("")、innerHTML="" 與 empty()的區別：關於內容泄露問題，jqueryinnerhtml

最後更新：2014-11-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

[JS][jQuery]清空元素html("")、innerHTML="" 與 empty()的區別：關於內容泄露問題，jqueryinnerhtml

清空元素html("")、innerHTML="" 與 empty()的區別

一、清空元素的區別     1、錯誤做法一：           $("#test").html("");//該做法會導致記憶體泄露

     2、錯誤做法二：           $("#test")[0].innerHTML="";  ;//該做法會導致記憶體泄露

     3、正確做法：

       //$("#test").empty();

二、原理：

在 jquery 中用 innerHTML 的方法來清空元素，是必然會導致記憶體泄露的，由於 jquery 對於同一元素多事件處理沒有直接採用瀏覽器事件模型，而是自己緩衝事件，遍曆觸發，以及便於 trigger 程式觸發：

// Init the element's event structure
var events = jQuery.data(elem, "events") || jQuery.data(elem, "events", {}),
handle = jQuery.data(elem, "handle") || jQuery.data(elem, "handle", function(){
// Handle the second event of a trigger and when
// an event is called after a page has unloaded
return typeof jQuery !== "undefined" && !jQuery.event.triggered ?
jQuery.event.handle.apply(arguments.callee.elem, arguments) :
undefined;
});

採用 data 方法，將一些資料關聯到了元素上面，上述事件即是採用該機制緩衝事件監聽器。

那麼就可以知道，直接 innerHTML＝“” 而不通知 jquery 清空與將要刪除元素關聯的資料，那麼這部分資料就再也釋放不了了，即為記憶體泄露。

remove: function( selector ) {
if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
// Prevent memory leaks
jQuery( "*", this ).add([this]).each(function(){
jQuery.event.remove(this);
jQuery.removeData(this);
});
if (this.parentNode)
this.parentNode.removeChild( this );
}
},
empty: function() {
// Remove element nodes and prevent memory leaks
jQuery(this).children().remove();
// Remove any remaining nodes
while ( this.firstChild )
this.removeChild( this.firstChild );
}

jquery裡使用empty()與html("")有什不同?

empty()、html("")和text("")在刪除匹配元素內內容時是一樣的。jQuery源碼中實現有所不同，但效果相同。你可以測試一下
源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="../scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#btnEmpty').click(function(){
$('#aim').empty();
alert("empty()");
});
$('#btnHtml').click(function(){
$('#aim').html("");
alert('html("")');
});
$('#btnText').click(function(){
$('#aim').text("");
alert('text("")');
});
});

</script>
</head>

<body>
<div id="aim">

<ul>
<li>111111111</li>
<li>222222222</li>
<li>333333333</li>
<li>444444444</li>
</ul>

</div>
<button id='btnEmpty'>empt......餘下全文>>

為何jQuery在輸出html代碼後下面的內容不再執行了

alert("ul").html()
目測是這句出錯了
你的意思應該是希望列印<ul>節點的innerHtml？
那麼應該是： alert($("ul").html());
還有，jquery元素和js元素請不要混用，容易出問題
$ul = $("ul).children() 這裡的 $ul是一個jquery元素
因此：$ul[i].innerHTML 最好改成 $ul[i].html()
還有，既然用jquery就要用的徹底，不要再用for迴圈了
試試jquery的 .each()，再回頭來看現在的for，是不是覺得for實在很遜？

祝你好運：）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More