原生JS添加节点方法与jQuery添加节点方法的比较及总结

时间:2022-08-06 08:55:26

一、首先构建一个简单布局,来供下边讲解使用

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添加节点方法与jQuery添加节点方法的比较及总结

二、原生JS种添加节点一共有2种方法

1、appendChild()

(1)、概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加

(2)、使用方式:父级节点.appendChild( 要添加的节点 )

(3)、JS代码:

document.onclick = function(){
oDiv2.appendChild(oB2);//将b2追加到div2里面的最后面
}

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

2、insertBefore()

(1)、概念:把要插入的节点添加到指定父级里面的指定节点之前

(2)、使用方式:父级节点.insertBefore( 要插入的节点,指定节点 )

(3)、JS代码:(注:每执行一次新方法时,上一个方法都会被注释掉,为了易懂,此处注释一次,下面的文章中将不再把注释上一个方法的代码发上来)

document.onclick = function(){
//oDiv2.appendChild(oB2);此处将上一个方法注释
oDiv2.insertBefore(oB2,oSpan2);//将b2插入到div2中的span2前面
}

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(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)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

2、第一组的insertBefore()

(1)、概念:把要插入节点插入到指定节点的前面

(2)、使用方式:要插入的节点.insertBefore( 指定节点 )

(3)、JS代码:

$(document).click(function(){
$('#b2').insertBefore( $('#span2') );//将b2插入到span2的前面
})

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

3、第二组的after()

(1)、概念:把要添加的节点添加到指定节点的后面

(2)、使用方式:指定节点.after( 要添加的节点 )

(3)、JS代码:

$(document).click(function(){
$('#span2').after( $('#b2') );//在span2的后面添加b2
})

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

4、第二组的insertAfter()

(1)、概念:把要插入的节点插入到指定节点的后面

(2)、使用方式:要插入的节点.insertAfter( 指定节点 )

(3)、JS代码:

$(document).click(function(){
$('#b2').insertAfter( $('#span2') );//将b2插入到span2的后面
})

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

5、第三组的prepend()

(1)、概念:在指定父级里面的最前面添加指定节点

(2)、使用方式:父级节点.prepend( 要添加的节点 )

(3)、JS代码:

$(document).click(function(){
$('#div2').prepend( $('#b2') );//在div2里面的最前面添加b2
})

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

6、第三组的prependTo()

(1)、概念:把指定节点添加到指定父级里面的最前面

(2)、使用方式:要添加的节点.prependTo( 父级节点 )

(3)、JS代码:

$(document).click(function(){
$('#b2').prependTo( $('#div2') );//将b2添加到div2里面的最前面
})

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

7、第四组的append()(注:此方法基本等同于原生JS的appendChild方法)

(1)、概念:在指定父级里面的最后面添加指定节点

(2)、使用方式:父级节点.append( 要添加的节点 )

(3)、JS代码:

$(document).click(function(){
$('#div2').append( $('#b2') );//在div2里面的最后面添加b2
})

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(5)、兼容性:所有浏览器都支持此方法

8、第四组的appendTo()

(1)、概念:把指定节点添加到指定父级里面的最后面

(2)、使用方式:要添加的节点.appendTo( 父级节点 )

(3)、JS代码:

$(document).click(function(){
$('#b2').appendTo( $('#div2') );//把b2添加到div2里面的最后面
})

(4)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

(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)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

4、给用appendTo()方法的代码加css方法

(1)、JS代码:

$(document).click(function(){
$('#b2').appendTo( $('#div2') ).css('background','red');//把b2添加到div2里面的最后面,并给返回来的jquery对象加背景色
})

(2)、图示:

原生JS添加节点方法与jQuery添加节点方法的比较及总结

五、总结

通过上面的2张图,可以发现,通过append()与appendTo()方法虽然都可以进行添加节点的操作,但是他们返回的jquery对象是不同的,而我们有时候要对添加节点后返回的jQuery对象进行后续操作,所以,我们在选择添加节点的方法的时候,要根据我们的实际需求来选择。(其他3组的也是同理,这里就不一一细说了)