JQuery中after、append、insertAfter、prepend的簡單用法

after、append、insertAfter都有向選定元素之后插入指定內容的功能，但還是有點不同的。

簡單代碼：

<div>
   <p>段落1</p>
</div>

<div>
   <p>段落1</p>
</div>

  

1、after：在選定元素之后插入指定的內容，該內容可以包含HTML標簽。

使用after方法向<div>之后插入代碼：$("div").after("<p>段落2</p>")。

運行之后的代碼結構為：

由此可知：使用after方法追加內容，是在選定的元素外部追加，也就是跳出選定元素在選定元素之后追加。

 

2、append：在選定元素的結尾插入指定內容，該內容也可以包含HTML標簽。

使用append方法向<div>之后插入代碼：$("div").append("<p>段落2</p>")。

運行之后的代碼結構為：

因此：使用append方法追加內容，是在選定元素的內部追加，沒有跳出選定元素，直接在選定元素的尾部追加內容。

 

3、insertAfter：在被選元素之后插入指定內容或已有元素，該內容可以是HTML標簽，也可以是選擇器表達式

HTML標簽：

使用insertAfter方法向<div>之后插入代碼：$("<p>段落2</p>").insertAfter("div")。

運行之后的結構為：

它的結構跟after的結構相同，也是在選定的元素外部追加內容，跳出選定元素之后追加。

 

選擇器表達式：這種情況是在頁面中存在要插入的元素。

簡答的代碼結構：

<div>
   <h1>這是一個標題1</h1>
   <h1>這是一個標題2</h1>
   <h1>這是一個標題3</h1>
</div>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>

<div>
   <h1>這是一個標題1</h1>
   <h1>這是一個標題2</h1>
   <h1>這是一個標題3</h1>
</div>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>

 

使用insertAfter方法向<div>之后插入代碼：$("h1").insertAfter("div")。

運行之后的代碼結構為：

再使用insertAfter方法向<p>之后插入代碼：$("h1").insertAfter("p")。

運行之后的代碼結構為：

 

由上面的兩個例子可以看出：使用insertAfter方法插入已有元素，已有元素會被從當前位置移走，然后被添加到選定的元素之后。有點類似於：先復制一份已有元素，然后在頁面上刪除已有元素，再在每一個選定元素之后粘貼一份復制的已有元素。

 

5、prepend：在選定元素的開頭插入指定內容，該內容可以包含HTML標簽。

使用prepend方法向<div>之后插入代碼：$("div").prepend("<p>段落2</p>")。

運行之后的代碼結構為：

其結構跟append的結構相同，也是直接在選定元素的內部追加，不需要跳出選定元素，不同的是append是在選定元素的尾部追加，prepend是在選定元素的開頭追加。