1. append()和prepend()

假设

<div class='a'> //<---you want div c to append in this <div class='b'>b</div> </div> 123

使用

$('.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> 1234

同样使用

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

效果如下：

<div class='a'> //<---you want div c to append in this <div class='c'>c</div> <div class='b'>b</div> </div> 123456

2. 使用after()和before()

同样使用假设代码：

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

效果如下：

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

同样使用before()

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

效果如下：

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

总结：

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

from: https://blog.csdn.net/yexudengzhidao/article/details/54709224