JS添加节点方法与JQuery添加节点方法的比较及总结
原生JS添加节点方法与JQuery添加节点方法的比较及总结
一、首先构建一个简单布局,来供下边讲解使用
1、HTML部分代码:
<div id="div1">div1</div>
<div id="div2">div2
<span id="span1">span1</span>
<span id="span2">span2</span>
</div>
<div id="div3">div3
<b id="b1">b1</b>
<b id="b2">b2</b>
</div>
2、JS部分代码:(先把刚才在html中写的几个标签都获取到,此处只在原生JS中用,在JQuery中默认被删除)
var oDiv2 = document.getElementById('div2');
var oSpan2 = document.getElementById('span2');
var oB2 = document.getElementById('b2');
3、图示:
二、原生JS种添加节点一共有2种方法
1、appendChild()
(1)、概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加
(2)、使用方式:父级节点.appendChild( 要添加的节点 )
(3)、JS代码:
document.onclick = function(){
oDiv2.appendChild(oB2);//将b2追加到div2里面的最后面
}
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
2、insertBefore()
(1)、概念:把要插入的节点添加到指定父级里面的指定节点之前
(2)、使用方式:父级节点.insertBefore( 要插入的节点,指定节点 )
(3)、JS代码:(注:每执行一次新方法时,上一个方法都会被注释掉,为了易懂,此处注释一次,下面的文章中将不再把注释上一个方法的代码发上来)
document.onclick = function(){
//oDiv2.appendChild(oB2);此处将上一个方法注释
oDiv2.insertBefore(oB2,oSpan2);//将b2插入到div2中的span2前面
}
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法,但是值得注意的是,如果第二个参数节点不存在,在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中,而其他主流浏览器(Firefox、Chrome、Opera等)下会报错,所以在插入节点的时候,需要先判断第二个参数节点是否存在
三、JQuery中添加节点一共有4组方法,每组方法有2种方式
第一组:before()、insertBefore()
第二组:after()、insertAfter()
第三组:prepend()、prependTo()
第四组:append()、appendTo()
1、第一组的before()
(1)、概念:在指定节点的前面添加要添加的节点
(2)、使用方式:指定节点.before( 要添加的节点 )
(3)、JS代码:
先随便导入个jquery(此时默认上边通过原生JS获取元素的方法的代码已被删除,并且导入jquery的代码只发一次,后面的文章中不再发)
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
$(document).click(function(){
$('#span2').before( $('#b2') );//在span2的前面添加b2
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
2、第一组的insertBefore()
(1)、概念:把要插入节点插入到指定节点的前面
(2)、使用方式:要插入的节点.insertBefore( 指定节点 )
(3)、JS代码:
$(document).click(function(){
$('#b2').insertBefore( $('#span2') );//将b2插入到span2的前面
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
3、第二组的after()
(1)、概念:把要添加的节点添加到指定节点的后面
(2)、使用方式:指定节点.after( 要添加的节点 )
(3)、JS代码:
$(document).click(function(){
$('#span2').after( $('#b2') );//在span2的后面添加b2
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
4、第二组的insertAfter()
(1)、概念:把要插入的节点插入到指定节点的后面
(2)、使用方式:要插入的节点.insertAfter( 指定节点 )
(3)、JS代码:
$(document).click(function(){
$('#b2').insertAfter( $('#span2') );//将b2插入到span2的后面
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
5、第三组的prepend()
(1)、概念:在指定父级里面的最前面添加指定节点
(2)、使用方式:父级节点.prepend( 要添加的节点 )
(3)、JS代码:
$(document).click(function(){
$('#div2').prepend( $('#b2') );//在div2里面的最前面添加b2
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
6、第三组的prependTo()
(1)、概念:把指定节点添加到指定父级里面的最前面
(2)、使用方式:要添加的节点.prependTo( 父级节点 )
(3)、JS代码:
$(document).click(function(){
$('#b2').prependTo( $('#div2') );//将b2添加到div2里面的最前面
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
7、第四组的append()(注:此方法基本等同于原生JS的appendChild方法)
(1)、概念:在指定父级里面的最后面添加指定节点
(2)、使用方式:父级节点.append( 要添加的节点 )
(3)、JS代码:
$(document).click(function(){
$('#div2').append( $('#b2') );//在div2里面的最后面添加b2
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
8、第四组的appendTo()
(1)、概念:把指定节点添加到指定父级里面的最后面
(2)、使用方式:要添加的节点.appendTo( 父级节点 )
(3)、JS代码:
$(document).click(function(){
$('#b2').appendTo( $('#div2') );//把b2添加到div2里面的最后面
})
(4)、图示:
(5)、兼容性:所有浏览器都支持此方法
四、JQuery中添加节点的4组方法每组之间的区别
1、发现问题:眼尖的朋友不难发现,jquery这4组添加节点的方法,每组的2种方法达到的效果几乎都差不多,那么他们到底有什么不同呢?我来拿举个例子大家就清楚了
2、举例说明:我们拿第四组来当例子,现在我要将刚才的JS代码做一些修改,在后边用css方法添加背景色
3、给用append()方法的代码加css方法
(1)、JS代码:
$(document).click(function(){
$('#div2').append( $('#b2') ).css('background','red');//在div2里面的最后面添加b2,并给返回来的jquery对象加背景色
})
(2)、图示:
4、给用appendTo()方法的代码加css方法
(1)、JS代码:
$(document).click(function(){
$('#b2').appendTo( $('#div2') ).css('background','red');//把b2添加到div2里面的最后面,并给返回来的jquery对象加背景色
})
(2)、图示:
五、总结
通过上面的2张图,可以发现,通过append()与appendTo()方法虽然都可以进行添加节点的操作,但是他们返回的jquery对象是不同的,而我们有时候要对添加节点后返回的jquery对象进行后续操作,所以,我们在选择添加节点的方法的时候,要根据我们的实际需求来选择。(其他3组的也是同理,这里就不一一细说了)
JS添加节点方法与JQuery添加节点方法的比较及总结的更多相关文章
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- 节点插入--对比jQuery和JavaScript方法(一)
二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 ap ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- MVC异步AJAX的三种方法(JQuery的Get方法、JQuery的Post方法和微软自带的异步方法)
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点? 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- js添加、修改、删除xml节点例子
version="1.0" encoding="gb2312"?> . <bookstore> . <book genre=" ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
随机推荐
- htc one x刷机记录
这几天有些空余时间都用来刷htc one x,来说说刷机的艰难史吧. 首先是利用百度云rom刷机,本来一直用小米系统,突然发现百度云也能够搞个,所以心血来潮要刷个百度云,先利用软件解锁,哪知道没细致看 ...
- 苹果公司的新的编程语言 Swift 高级语言(十一)--初始化类的析构函数的一个实例
一 .实例的初始化 实例的初始化是准备一个类.结构或枚举的实例以便使用的过程. 初始化包含设置一个实例的每个存储属性为一个初始值,以及运行不论什么其他新的实例可以使用之前须要的设置或 ...
- HDU 1420 Prepared for New Acmer【中国剩余定理】
/* 解决问题的思路:中国剩余定理,还要注意的是数据的类型,要使用__int64位 解决人:lingnichong 解决时间:2014-08-30 06:56:35 :简单题 */ Prepared ...
- WPF 3D:使用GeometryModel3D的BackMaterial
原文 WPF 3D:使用GeometryModel3D的BackMaterial 使用BackMaterial,我们可以定义3D物体的内部材质(或者说是背面),比如,我们定义一个四方体容器,外面现实的 ...
- 局部敏感哈希(Locality-Sensitive Hashing, LSH)方法介绍
局部敏感哈希(Locality-Sensitive Hashing, LSH)方法介绍 本文主要介绍一种用于海量高维数据的近似近期邻高速查找技术--局部敏感哈希(Locality-Sensitive ...
- android判断是否含有某权限
boolean has_permission = (PackageManager.PERMISSION_GRANTED == pkm.checkPermission("android.per ...
- 答读者问(8):相关Java问题涉及到学习
近来的,我收到一个研究生朋友的电子邮件,一般内容如下面: 日 (本人微博:http://weibo.com/zhouzxi?topnav=1&wvr=5,我们的聊天号码:245924426.欢 ...
- Cocos2d-x场景功能描述的生命周期
层(Layer)的生命周期函数有例如以下: init().初始化层调用. onEnter().进入层时候调用. onEnterTransitionDidFinish(). 进入层并且过渡动画结束时候调 ...
- hdu3572 任务分配/最大流量推论全流
意甲冠军:将n分配的任务m机.到的每个任务需要的天数(如果没有持续的日常),并能做到在哪些天任务.询问是否有计划. 典型的任务(X)----日(Y)一半的最大流量,(因为这个任务是天之间的关系)处理器 ...
- EJB学习笔记
1 J2ee概述 J2ee是企业级的计算平台,它为分布式和基于组件的软件开发提供了一个“操作系统” Ant是什么工具?? EJB: 什么是EJB? 是一种server端组件结构,简化了开发分布式企 ...