jquery中append、prepend, before和after方法的区别

注:本次使用jquery版本为2.1.1版本


在jquery中,添加元素有append(),prepend()和after(),before()等共4个函数。

根据字面意思我们可以看出他们分别是追加、添加和之前、之后 意思很相近。同时他们又都有添加元素的作用,容易混淆。要想搞清楚他们之间的区别,首先我们要明白这几个函数各自的作用。


一.append()和prepend()的作用

append()用于在被选元素的结尾插入元素。

prepend()用于在被选元素的开头插入元素。

重点在于黑体字——被选元素的

也就是说这两个函数的添加都是添加到元素的内部的。


看下面的HTML代码:

<div id="test">
    <p>a</p>
</div>

使用append()和prepend()添加元素:

 $(function(){
 
       $("#test").append("<p>b</p>")  //使用append()添加b段落
       $("#test").prepend("<p>c</p>") //使用prepend()添加c段落

    })

效果如下:

<div id="test">
<p>c</p>
<p>a</p>
<p>b</p>
</div>

二. after() 和 before() 的作用

after()用于在被选元素之后插入内容。

before()用于在被选元素之前插入内容。

重点在于黑体字元素之前 ,元素之后。

这意味着这两个函数是往元素外部的前后添加的。


还是刚刚的HTML代码:

<div id="test">
    <p>a</p>
</div>

使用 after() 和 before()添加元素:

 
 $(function(){

        $("#test").after("<p>b</p>");
        $("#test").before("<p>c</p>");

    })

效果如下:

<p>c</p>
<div id="test">
<p>a</p>
</div>
<p>b</p>

总结:

通过上面两个例子,我们可以清楚的看到四个函数 append 和 prepend 与 after和before 的区别。

append()和prepend()函数是在元素内插入内容(该内容变成该元素的子元素或节点)。

after()和before()函数是在元素的外面插入内容(其内容变成元素的兄弟节点)。


声明:禁止任何非法用途使用,凡因违规使用而引起的任何法律纠纷,本站概不负责。

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

精彩评论

全部回复12人评论7,777人参与