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

1.  append()和prepend()

假設

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
</p>

使用

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

效果如下：

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
  <p class=&#39;c&#39;>c</p>
</p>

同樣使用

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

效果如下：

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;c&#39;>c</p>
  <p class=&#39;b&#39;>b</p>

</p>

2. 使用after()和before()

同樣使用假設碼：

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

效果如下：

<p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p><p class=&#39;c&#39;>c</p>

同樣使用before()

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

效果如下：

<p class=&#39;c&#39;>c</p><p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p>

總結：

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

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
</p>

使用

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

效果如下：

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;b&#39;>b</p>
  <p class=&#39;c&#39;>c</p>
</p>

同樣使用

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

效果如下：

<p class=&#39;a&#39;> //<---you want p c to append in this
  <p class=&#39;c&#39;>c</p>
  <p class=&#39;b&#39;>b</p>

</p>

2. 使用after ()和before()

同樣使用假設程式碼：

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

效果如下：

<p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p><p class=&#39;c&#39;>c</p>

同樣使用before()

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

效果如下：

<p class=&#39;c&#39;>c</p><p class=&#39;a&#39;>
  <p class=&#39;b&#39;>b</p></p>

總結：

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

以上是jquery中append、prepend, before和after方法的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！