[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别：关于内容泄露问题

清空元素html("")、innerHTML="" 与 empty()的区别,以及remove()的用法

一、清空元素的区别     1、错误做法一：           $("#test").html("");//该做法会导致内存泄露

     2、错误做法二：           $("#test")[0].innerHTML="";  ;//该做法会导致内存泄露

     3、正确做法：

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

二、原理：

在 jquery 中用 innerHTML 的方法来清空元素，是必然会导致内存泄露的，由于 jquery 对于同一元素多事件处理没有直接采用浏览器事件模型，而是自己缓存事件，遍历触发，以及便于 trigger 程序触发 ：

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

采用 data 方法，将一些数据关联到了元素上面，上述事件即是采用该机制缓存事件监听器。

那么就可以知道，直接 innerHTML＝“” 而不通知 jquery 清空与将要删除元素关联的数据，那么这部分数据就再也释放不了了，即为内存泄露。

1. remove: function( selector ) {  
2.         if ( !selector || jQuery.filter( selector, [ this ] ).length ) {  
3.             // Prevent memory leaks  
4.             jQuery( "*", this ).add([this]).each(function(){  
5.                 jQuery.event.remove(this);  
6.                 jQuery.removeData(this);  
7.             });  
8.             if (this.parentNode)  
9.                 this.parentNode.removeChild( this );  
10.         }  
11.     },  
12.   
13.     empty: function() {  
14.         // Remove element nodes and prevent memory leaks  
15.         jQuery(this).children().remove();  
16.   
17.         // Remove any remaining nodes  
18.         while ( this.firstChild )  
19.             this.removeChild( this.firstChild );  

1.     }  

要用到移除指定元素的时候，发现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