清空元素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?);??

????}?

三、要用到移除指定元素的時候，發現empty()與remove([expr])都可以用來實現。可仔細觀察效果的話就可以發現。empty()是只移除了 指定元素中的所有子節點，拿$("p").empty()來說，他只是把<p>dsfsd</p>中的文本給移除了，而留下 了<p></p>,仍保留其在dom中所占的位置。
remove([expr])則是把其從dom中刪除，而不會保留其所占的位置。‘

例:
<p>Hello</p>
World
<p>welcome</p>
執行$("p").empty()其結果是
<p></p>
World
<p></p>

執行$("p").remove()其結果是
World

?

轉載于:https://www.cnblogs.com/caroline4lc/p/4383275.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的[JS][jQuery]清空元素html()、innerHTML= 与 empty()的区别 、remove()区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。