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

以上就是小编为大家整理的清空元素html("")、innerHTML="" 与 empty()的区别和应用的全部内容啦~希望能够帮助到各位朋友~~

赞 (0)

相关推荐

  • jQuery使用empty()方法删除元素及其所有子元素的方法

    本文实例讲述了jQuery使用empty()方法删除元素及其所有子元素的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function()

  • 老生常谈jquery中detach()和remove()的区别

    JQuery是一个很大强的工具库,在工作中开发中,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略. remove()和detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了 通过一张对比表来解释2个方法之间的不同 方法名 参数 事件及数据是否也被移除 元素自身是否被移除 remove 支持选择器表达 是 是(无参数时),有参数时要根据参数所涉及的范围 detach 参数同remove 否 情况同remove remove:移除节点 -

  • PHP isset()与empty()的使用区别详解

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在则返回 FALSE 若变量存在且其值为NULL,也返回 FALSE 若变量存在且值不为NULL,则返回 TURE 同时检查多个变量时,每个单项都符合上一条要求时才返回 TRUE,否则结果为 FALSE 版本:PHP 3, PHP 4, PHP 5 更多说明: 使用 unset() 释放变量之后,它将

  • jquery之empty()与remove()区别说明

    1.empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置. 2.remove([expr])则是把其从dom中删除,而不会保留其所占的位置. 例:<p>Hello</p>World<p>welcome</p> 执行$("p").empt

  • jQuery remove()过滤被删除的元素（推荐）

    jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤. 该参数可以是任何 jquery 选择器的语法. 下面的例子删除 class="italic" 的所有 <p> 元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/

  • php empty,isset,is_null判断比较（差异与异同）

    php empty,isset,is_null判断比较（差异与异同）

    一.举例说明 A.一个变量没有定义,我们该怎么样去判断呢 复制代码 代码如下: <?php #不存在$test 变量 $isset= isset($test)?"test is define!":"test is undefine!"; echo "isset:$isset\r\n"; $empty=!empty($test)?"test is define!":"test is undefine!"

  • jQuery删除节点的三个方法即remove()detach()和empty()

    jQuery提供了三种删除节点的方法,即remove(),detach()和empty(). 测试所用HTML代码: 复制代码 代码如下: <p title="选择你最喜欢的水果?">你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝"

  • 浅谈java Iterator.remove()方法的用法(详解)

    实例如下: @Test public void tt(){ List<String> list = new ArrayList<String>(); list.add( "0" ); list.add( "1" ); list.add( "2" ); list.add( "3" ); list.add( "4" ); list.add( "5" ); list.a

  • javascript Array.remove() 数组删除

    复制代码 代码如下: Array.prototype.remove = function(b) { var a = this.indexOf(b); if (a >= 0) { this.splice(a, 1); return true; } return false; }; 以后使用过程中,就可以直接利用这个函数,删除数组中的值了.

  • 清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)

    一.清空元素的区别 1.错误做法一: $("#test").html("");//该做法会导致内存泄露   2.错误做法二: $("#test")[0].innerHTML="";  ;//该做法会导致内存泄露 3.正确做法:   //$("#test").empty();        二.原理: 在 jQuery 中用 innerHTML 的方法来清空元素,是必然会导致内存泄露的,由于 jquery 对

  • JS中innerHTML和pasteHTML的区别实例分析

    本文实例讲述了JS中innerHTML和pasteHTML的区别.分享给大家供大家参考,具体如下: innerHTML 是一个属性,可以取得或者设定该元素内的 HTML 内容,可以是任意能包含 HTML 子节点的元素都使用它 pasteHTML()是一个方法,在指定的文字区域内替换该区域内的文本或者HTML,该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上 例: <Script Language="

  • java中元素排序Comparable和Comparator的区别

    目录 Comparable Comparator 总结 初次碰到这个问题是之前有一次电话面试,问了一个小时的问题,其中有一个问题就问到Comparable和Comparator的区别,当时没答出 来.之后是公司入职时候做的一套Java编程题,里面用JUnit跑用例的时候也用到了Comparator接口,再加上JDK的大量的类包括常见的 String.Byte.Char.Date等都实现了Comparable接口,因此要学习一下这两个类的区别以及用法. Comparable Comparable可

  • Java元素排序Comparable与Comparator的区别

    Java元素排序Comparable与Comparator的区别

    目录 1.字面含义不同 2.用法不同 2.1 Comparable 2.2 compareTo 排序方法说明 2.3 Comparator 3.扩展:Comparator 匿名类 4.使用的场景不同 总结 两者比较结构图: 在 Java 语言中,Comparable 和 Comparator 都是用来进行元素排序的,但二者有着本质的区别.它们两也是常见的面试题,所以今天我们一起来盘它. 1.字面含义不同 我们先从二者的字面含义来理解它,Comparable 翻译为中文是“比较”的意思,而 Com

  • IE bug table元素的innerHTML

    首先时飘忽不定的collapse的border,ie6偏偏有一个地方与其他浏览器表现不同,一条丑陋的border不管怎么样都显示出来.无解. 上面的问题可以用诡异方法解决的话,那接下来就完全没有办法了. 由于涉及到了数据的异步传输和实时显示,于是自己写了一个前端模版通过innerHTML动态更新数据.其他浏览器都工作正常,偏偏ie怎么都出不来数据.排查了半天,结果是IE的table元素为只读,不能使用innerHTML!!!! 同样为只读的元素还有COL, COLGROUP, FRAMESET,

  • isset和empty的区别

    isset($var); //为false 没有定义没有定义为假 $var = '';  isset($var); //为true 定义了为真 empty($var); //为true 值为空反回真 $var = '111'; empty($var); //为false 不为空返回假

  • InnerHtml和InnerText的区别分析

    最详细的解答可以参见MSDN InnerTexthttp://msdn.microsoft.com/zh-cn/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innertext.aspx InnerHtmlhttp://msdn.microsoft.com/zh-cn/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innerhtml.aspx 简要解释: Inner

  • innerhtml用法 innertext用法 以及innerHTML与innertext的区别

    test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是"<span style="color:red">test1</span> test2 ". test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签 上例中的text.innerTest的值也就是"test1 test2", 其中span标签去除了. te

  • IE6与IE7中，innerHTML获取param的区别

    IE6与IE7中，innerHTML获取param的区别

    代码: 复制代码 代码如下: <html> <head> <script type="text/javascript"><!-- function setMode(newMode) { var text1=document.getElementById("text1"); var cont; bTextMode = newMode; if (bTextMode) { cont=text1.innerHTML; text1.i

  • PHP isset()及empty()用法区别详解

    PHP isset函数作用 isset函数是检测变量是否设置. 格式:bool isset( mixed var [, mixed var [, ...]] ) 返回值: 若变量不存在则返回FALSE 若变量存在且其值为NULL,也返回FALSE 若变量存在且值不为NULL,则返回TURE 同时检查多个变量时,每个单项都符号上一条要求时才返回TRUE,否则结果为FALSE 如果已经使用unset()释放了一个变量之后,它将不再是isset().若使用isset()测试一个被设置成NULL的变量,

随机推荐