jquery中append、prepend, before和after方法的區別__jquery

1. append()和prepend() 假設

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

使用

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

效果如下：

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

同樣使用

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

效果如下：

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

2. 使用after()和before()

同樣使用假設代碼：

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

效果如下：

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

同樣使用before()

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

效果如下：

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

總結： append() & prepend()是在元素插入入內容（該內容變成該元素的子項目或節點），after() & before()是在元素的外面插入內容（其內容變成元素的兄弟節點）。