[JS][jQuery]清空元素html()、innerHTML= 与 empty()的区别 、remove()区别
清空元素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()区别相关推荐
- js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&q ...
- js jquery 清空form表单
js jquery 清空form表单 //js document.getElementById("formId").reset(); //jquery $("#formI ...
- js jquery 获取元素(父节点,子节点,兄弟节点)
js jquery 获取元素(父节点,子节点,兄弟节点) js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test&quo ...
- javascript js jquery获取元素位置代码总结
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小 首先,要明确两个基本概念. 一张网页的全部 ...
- js jquery 判断元素是否在数组内
一,js方法 var arr = ["a", "b", "c"]; // js arr.indexOf("c") var ...
- html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(v ...
- html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素 创建select var select = document.cre ...
- JS/Jquery 中移除子元素的问题
1.前端样式: <p id="p1" class="card-description"><code>商品信息</code>& ...
- jQuery删除元素---remove()与empty()
jQuery删除元素-remove()与empty() remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 举例:remove() <script> ...
最新文章
- Android 使用adb 命令截图 的方法
- 字节跳动的敌人,只有时间
- Android 如何在xmL 里面动态设置padding
- 【黑金原创教程】【FPGA那些事儿-驱动篇I 】【实验一】流水灯模块
- curl_init()和curl_multi_init()多线程的速度比较
- mysql5.6安装sys库_MySQL5.6数据库优化my.cnf配置
- 强烈的打击感jinbiguandan
- php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5),识别html5标签: html5添加了许 - phpStudy...
- linux之程序包管理器(rpm)
- 如何理解电容、电感产生的相位差
- 安全提示:勒索病毒漏洞与CPU漏洞务必小心
- hi3798 run linux,EC6108V9(HI3798MV100)刷(linux)ubuntu16.04
- 010Editor的Template安装与使用
- 五类IP地址范围及作用
- 腾讯云短信服务在项目中的使用
- Android-安卓Canvas画小黄人
- 分享一款基于aui框架的图文发布界面
- 基于opencv的倾斜文本行的校正
- 企业微信网页授权及JS-SDK碰到检查域名所有权不通过的问题
- oracle asm无法关闭,ASM无法关闭 - Oracle专题深入讨论 - ITPUB论坛-中国专业的IT技术社区...
热门文章
- oracle空例程,2018.5.29 Oracle连接到空闲例程
- 世界手机号码格式_世界上手机号码最长的国家是中国,最短的是哪个国家?
- java对xml解析_Java中对xml的解析
- matlab语音信号处理实验_现代通信综合实验系统平台
- JVM思维导图、正则表达式符号图、企业内部开发流程图
- sony电视播放服务器文件,sony电视怎么样 sony电视支持视频格式【图文详解】
- python 简单web音频_Python Twisted web服务器音频fi
- DockerCompose构建Springboot项目
- 软件测试项目时间一般多少钱,项目的时间进度该如何估算?
- php中改变函数路由,通过PHP重启路由器以更换IP(原创)