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

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()是在元素的外面插入內容（其內容變成元素的兄弟節點）。