通过字面意思都会知道jquery的方法append()和after()是在操作符之后做添加，prepend()和before()方法是在操作符之前添加。但是他们之间还是有差异的，通过下面的几个例子可以总结。

append方法：

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果：

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

prepend方法：

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").prepend('<span class="s2">s2</span>');
</script>

结果：

<p>
<span class="s2">s2</span>
<span class="s1">s1</span>
</p>

after方法：

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果：

<p>
<span class="s1">s1</span>
</p>
<span class="s2">s2</span>

before方法：

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").before('<span class="s2">s2</span>');
</script>

结果：

<span class="s2">s2</span>
<p>
<span class="s1">s1</span>
</p>

通过上面的结果比对可以发现

1. append和prepend方法是在元素内嵌入

2. after和before则是在元素外部嵌入