在jQuery中，添加元素有append),prepend和 after),before)两种共四个。

根据字面意思我们可以看出他们分别是追加，添加和之前，之后，意思相近。同时他们又都有添加元素的作用，容易混淆。

要想搞清楚他们之间的区别。

首先我们要明白这几个函数各自的作用。

一.append)和prepend)的作用

append)用于在被选元素的结尾插入元素。

prepend)用于在被选元素的开头插入元素。

重点在于黑体字——被选元素的，

也就是说这两个函数的添加都是添加到元素的内部的。

看下面的HTML代码

<div id="test">
  <p>a</p>
</div>

使用 append ) 和 prepend )添加元素

$document).readyfunction){
    $"#test").append"<p>b</p>") //使用append)添加 b 段落
    $"#test").prepend"<p>c</p>") //使用 prepend)添加 c 段落
})

效果如下

<div id="test">
	<p>c</p>
	<p>a</p>
	<p>b</p>
</div>

从上面可以得知，当我们使用 append) 和 prepend)往 id 为 test 的 div 块添加元素时，是添加到 div 内部的。

也就是说，我们添加的元素，成为了被添加元素的子元素。

二. after) 和 before) 的作用

after)用于在被选元素之后插入内容。

before)用于在被选元素之前插入内容。

重点在于黑体字元素之前，元素之后。

这意味着这两个函数是往元素外部的前后添加的。

还是刚刚的HTML代码

<div id="test">
  <p>a</p>
</div>

使用 after) 和 before)添加元素。

$document).readyfunction){
    $"#test").after"<p>b</p>")
$"#test").before"<p>c</p>")
})

结果如下

<p>c</p>
<div id="test">
	<p>a</p>
</div>
<p>b</p>

从结果可知，after ) 和 before ) 往 id=”test“ 的 div块添加元素时，是添加到块外部的。

也就是说，添加的元素，成为了 被添加元素的兄弟元素。

通过上面两个例子，我们可以清楚的看到四个函数 append 和 prepend 与 after和before 的区别。

只要明白 往元素内的前后添加 和 往元素外的前后添加 的区别，就很容易区分了。