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

qmdweb發表於2018-06-03

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

相關文章