jQuery中append(),prepend()与after(),before()的区别

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

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

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

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

一.append()和prepend()的做用

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

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

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

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

看下面的HTML代码

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

使用 append( ) 和 prepend( )添加元素

$(document).ready(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>

 

 

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

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

 二. after() 和 before() 的做用

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

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

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

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

仍是刚刚的HTML代码

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

 

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

$(document).ready(function(){
    $("#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 的区别。

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