jquery中append、prepend, before和after方法的区别

1. 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>

2. 使用after()和before()

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

<div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div>

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

<div class='c'>c</div>
<div class='a'>
<div class='b'>b</div>
</div>

总结：

append() & prepend()是在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。