清空元素html("") innerHTML="" 与 empty()的区别和应用有哪些

今天就跟大家聊聊有关清空元素html("") innerHTML="" 与 empty()的区别和应用有哪些，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

一、清空元素的区别

1、错误做法一：

$("#test").html("");//该做法会导致内存泄露

2、错误做法二：

$("#test")[0][xss_clean]=""; ;//该做法会导致内存泄露

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[xss_clean])   this[xss_clean].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 );  }

看完上述内容，你们对清空元素html("") innerHTML="" 与 empty()的区别和应用有哪些有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注行业资讯频道，感谢大家的支持。