jQuery中的append()和prepend(),after()和before()的差別
阿新 • • 發佈:2017-08-05
兄弟節點 mar ant trac nes function data end markdown
jQuery中的append()和preappend(),after()和before()的差別
append()和prepend()
如果
<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()是在元素的外面插入內容(其內容變成元素的兄弟節點)。
jQuery中的append()和prepend(),after()和before()的差別