jquery中append、prepend, before和after方法的區別（一）
阿新 • • 發佈：2017-09-16
mod serve com oos 兄弟節點 sha pos 插入 5%
)H[YGJ69S5SCH5%60OHPZU.jpg)
原文：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
jquery中append、prepend, before和after方法的區別（一）