jquery中append()，prepend()和after()，before()的区别

开始在w3c教程看到这四种方法。开始有点疑惑，后来自己做个小例子敲代码试试。

这四种方法都是添加元素用的。

 

1、  append() - 在被选元素的结尾插入内容

　　 prepend() - 在被选元素的开头插入内容

代码示例：

使用append()，prepend()方法

 

htm代码：

　　<button class="btn">append()</button>

　　<button class="btn2">prepend()</button>

　　<div class="adc"></div>

 

jquery代码：

　　$(".btn").click(function(){

　　　　$(".adc").append("<p>abcdefg</p>")

　　})

　　$(".btn2").click(function(){

　　　　$(".adc").prepend("<p>abcdefg</p>")

　　})

 

最终效果：

　　

也就是说，使用 append() 和 prepend()往 div 块添加元素时，是添加到 div 内部的，我们添加的元素，成为了 被添加元素 的 子元素。

 

 

2、 after() - 在被选元素之后插入内容

　　before() - 在被选元素之前插入内容

 

代码示例：

使用before()，after()方法

 

html代码：

　　<button class="bef">before()</button>

　　<button class="aft">after()</button>

　　<div class="fff"></div>

 

jquery代码：　

　　$(".bef").click(function(){

　　　　$(".fff").before("<p>abcdefg</p>")

　　})

　　$(".aft").click(function(){

　　　　$(".fff").after("<p>abcdefg</p>")

　　})

 

最终效果：

 　　

 也就是说，使用 before() 和 after()往 div 块添加元素时，是添加到 div 外部的，我们添加的元素，成为了 被添加元素 的 同级元素。

 

这样就很容易区分两组方法的作用了。