Jquery中的append()和preappend(),after()和before()的區別

假設
<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>
after()和before()
一樣的上述代碼，使用
$('.a').after($('.c'));
結果：
<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here
使用
$('.a').before($('.c'));
結果：
<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>
由上咱們能夠得出結論：
append() & prepend()實在元素內插入內容（該內容變成該元素的子元素或節點），
after() & before()是在元素的外面插入內容（其內容變成元素的兄弟節點）。