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