jquery中append、prepend, before和after方法的区别(一)
原文: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
做有积累的事~~