1. append()和prepend()

假設

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

• 1
• 2
• 3

使用

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

• 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

同樣使用

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

• 1
• 2

效果如下：

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

</div>

• 1
• 2
• 3
• 4
• 5
• 6

2. 使用after()和before()

同樣使用假設程式碼：

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

• 1

效果如下：

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

• 1
• 2
• 3
• 4

同樣使用before()

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

• 1

效果如下：

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

• 1
• 2
• 3
• 4

總結：

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