注：本次使用jquery版本为2.1.1版本
在jquery中，添加元素有append(),prepend()和after(),before()等共4个函数。
根据字面意思我们可以看出他们分别是追加、添加和之前、之后 意思很相近。同时他们又都有添加元素的作用，容易混淆。要想搞清楚他们之间的区别，首先我们要明白这几个函数各自的作用。
一.append()和prepend()的作用
append()用于在被选元素的结尾插入元素。
prepend()用于在被选元素的开头插入元素。
重点在于黑体字——被选元素的
也就是说这两个函数的添加都是添加到元素的内部的。
看下面的HTML代码：
<div id="test"> <p>a</p> </div>
使用append()和prepend()添加元素：
$(function(){
$("#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>
二. after() 和 before() 的作用
after()用于在被选元素之后插入内容。
before()用于在被选元素之前插入内容。
重点在于黑体字元素之前 ，元素之后。
这意味着这两个函数是往元素外部的前后添加的。
还是刚刚的HTML代码：
<div id="test"> <p>a</p> </div>
使用 after() 和 before()添加元素：
$(function(){
$("#test").after("<p>b</p>");
$("#test").before("<p>c</p>");
})效果如下：
<p>c</p> <div id="test"> <p>a</p> </div> <p>b</p>
总结：
通过上面两个例子，我们可以清楚的看到四个函数 append 和 prepend 与 after和before 的区别。
append()和prepend()函数是在元素内插入内容（该内容变成该元素的子元素或节点）。
after()和before()函数是在元素的外面插入内容（其内容变成元素的兄弟节点）。
声明：禁止任何非法用途使用，凡因违规使用而引起的任何法律纠纷，本站概不负责。
精彩评论