您的位置：首页 > 移动开发

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

2017-09-16 15:12 726 查看

原文：http://blog.csdn.net/woosido123/article/details/64439490

在 jquery中append() 与 prepend()是在元素内插入内容（该内容变成该元素的子元素或节点），after() 与before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。

1. append()和prepend()

<div class='a'>
<div class='b'>b</div>
</div>


1

2

3

1

2

3

使用

$('.a').append($('.c'));


1

1

效果如下：

<div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
<div class='c'>c</div>
</div>


1

2

3

4

1

2

3

4

同样使用

$('.a').prepend($('.c'));


1

2

1

2

效果如下：

<div class='a'>
<div class='c'>c</div>
<div class='b'>b</div>
</div>


1

2

3

4

5

6

1

2

3

4

5

6

2. 使用after()和before()

同样使用假设代码：

$('.a').after($('.c'));


1

1

效果如下：

<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div>


1

2

3

4

1

2

3

4

同样使用before()

$('.a').before($('.c'));


1

1

效果如下：

<div class='c'>c</div>
<div class='a'>
<div class='b'>b</div>
</div>


1

2

3

4

1

2

3

4

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航