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 的區別。

只要明白 往元素內的先後添加 和 往元素外的先後添加 的區別，就很容易區分了。