jquery中append、prepend, before和after方法的區別
- 巴扎黑原創
- 2017-06-24 11:20:201577瀏覽
1. append()和prepend()
假設
<p class='a'> //<---you want p c to append in this <p class='b'>b</p> </p>
使用
$('.a').append($('.c'));
效果如下：
<p class='a'> //<---you want p c to append in this <p class='b'>b</p> <p class='c'>c</p> </p>
同樣使用
$('.a').prepend($('.c'));
效果如下：
<p class='a'> //<---you want p c to append in this <p class='c'>c</p> <p class='b'>b</p> </p>
2. 使用after()和before()
同樣使用假設碼：
$('.a').after($('.c'));
效果如下：
<p class='a'> <p class='b'>b</p></p><p class='c'>c</p>
同樣使用before()
$('.a').before($('.c'));
效果如下：
<p class='c'>c</p><p class='a'> <p class='b'>b</p></p>
總結：
append() & prepend()是在元素內插入內容（該內容變成該元素的子元素或節點），after () & before()是插入內容在元素的外部（其內容變成元素的兄弟節點）。 #假設
<p class='a'> //<---you want p c to append in this <p class='b'>b</p> </p>
使用
$('.a').append($('.c'));
效果如下：
<p class='a'> //<---you want p c to append in this <p class='b'>b</p> <p class='c'>c</p> </p>
同樣使用
$('.a').prepend($('.c'));
效果如下：
<p class='a'> //<---you want p c to append in this <p class='c'>c</p> <p class='b'>b</p> </p>
2. 使用after ()和before()
同樣使用假設程式碼：
$('.a').after($('.c'));
效果如下：
<p class='a'> <p class='b'>b</p></p><p class='c'>c</p>
同樣使用before()
$('.a').before($('.c'));
效果如下：
<p class='c'>c</p><p class='a'> <p class='b'>b</p></p>
總結：
append() & prepend()是在元素內插入內容（該內容變成該元素的子元素或節點），after() & before()是在元素的外部插入內容（其內容變成元素的兄弟節點）。
以上是jquery中append、prepend, before和after方法的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn