腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

jQuery中append、insertBefore、after與insertAfter的簡(jiǎn)單用法與注意事項(xiàng)

更新時(shí)間：2023年05月26日 23:15:43 投稿：mdxy-dxy

這篇文章主要為大家介紹了jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項(xiàng),需要的朋友可以參考下

JQuery中after、append、insertAfter、prepend的簡(jiǎn)單用法

功能說明

對(duì)比的看

before和prepend

before:在被選元素之前添加的內(nèi)容（內(nèi)容外面）

prepend:在被選元素的前面添加的內(nèi)容（內(nèi)容的里面）

同理

after和append

after:在被選元素之后添加的內(nèi)容（內(nèi)容外面）

append:在被選元素的后面添加的內(nèi)容（內(nèi)容的里面）

jquery的插入外部

after() 元素外的后面插入
insertAfter() 把內(nèi)容插入到元素外的后面
before() 在元素外的前面插入內(nèi)容
insertBefore() 把內(nèi)容插入到目標(biāo)元素外的后面

append與prepedn都是元素里面操作，這樣就比較簡(jiǎn)單了

實(shí)例分析

簡(jiǎn)單代碼：

<html>
<head>
<title>after、append、insertAfter用法—腳本之家</title>
</head>
<body>
<div>
<p>段落1</p>
</div>
</body>
</html>

下面的內(nèi)容我們一般都是在chrome瀏覽器中測(cè)試這樣比較容易看到效果

測(cè)試代碼

<!DOCTYPE html>
<html>
<head>
<title>after、append、insertAfter用法</title>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<p>段落1</p>
</div>
</body>
</html>

1、after：在選定元素之后插入指定的內(nèi)容，該內(nèi)容可以包含HTML標(biāo)簽。

使用after方法向div之后插入代碼：

$("div").after("<p>段落2</p>");

運(yùn)行之后的代碼結(jié)構(gòu)為：

偷偷的告訴你腳本之家的技術(shù)測(cè)試代碼都是用的這個(gè)方法，簡(jiǎn)單而直觀。

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

2、append：在選定元素的結(jié)尾插入指定內(nèi)容，該內(nèi)容也可以包含HTML標(biāo)簽。

使用append方法向div之后插入代碼：

$("div").append("<p>段落2</p>");

運(yùn)行之后的代碼結(jié)構(gòu)為：

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

3、insertAfter：在被選元素之后插入指定內(nèi)容或已有元素，該內(nèi)容可以是HTML標(biāo)簽，也可以是選擇器表達(dá)式

HTML標(biāo)簽：

使用insertAfter方法向div之后插入代碼：

$("<p>段落2</p>").insertAfter("div");

運(yùn)行之后的結(jié)構(gòu)為：

它的結(jié)構(gòu)跟after的結(jié)構(gòu)相同，也是在選定的元素外部追加內(nèi)容，跳出選定元素之后追加。

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

簡(jiǎn)答的代碼結(jié)構(gòu)：

<div> 
 <h1>這是一個(gè)標(biāo)題1</h1> 
 <h1>這是一個(gè)標(biāo)題2</h1> 
 <h1>這是一個(gè)標(biāo)題3</h1> 
</div> 
<p>這是一個(gè)段落。</p> 
<p>這是另一個(gè)段落。</p>

使用insertAfter方法向<div>之后插入代碼：

$("h1").insertAfter("div");

運(yùn)行之后的代碼結(jié)構(gòu)為：

下面腳本.之。。家小編來給大家對(duì)比一下

代碼執(zhí)行之前

代碼執(zhí)行以后

有沒有發(fā)現(xiàn)div的閉合跑到最上面了，然后

再使用insertAfter方法向<p>之后插入代碼：

$("h1").insertAfter("p");

運(yùn)行之后的代碼結(jié)構(gòu)為：

由上面的兩個(gè)例子可以看出：使用insertAfter方法插入已有元素，已有元素會(huì)被從當(dāng)前位置移走，然后被添加到選定的元素之后。有點(diǎn)類似于：先復(fù)制一份已有元素，然后在頁面上刪除已有元素，再在每一個(gè)選定元素之后粘貼一份復(fù)制的已有元素。

所有基于這個(gè)原理，我們看一下基于jquery的文章中所有圖片width大小的代碼

$('#content').find('img').each(function(){
 var img = this;
 if (img.width > 600) {
  img.style.width = "600px";
  img.style.height = "auto";
  //$(img).removeAttr('height');
  var aTag = document.createElement('a');
  aTag.href = img.src;
			aTag.target="_blank";
  $(aTag).addClass('bPic')
  .insertAfter(img).append(img)
  .lightBox(options);
 }
 });

是不是感覺很酷呢

就是為較大的圖片加上一個(gè)a鏈接，在新窗口打開。這樣主要是方便用戶查看較大的圖片。

5、prepend：在選定元素的開頭插入指定內(nèi)容，該內(nèi)容可以包含HTML標(biāo)簽。

使用prepend方法向<div>之后插入代碼：

$("div").prepend("<p>段落2</p>");

運(yùn)行之后的代碼結(jié)構(gòu)為：

其結(jié)構(gòu)跟append的結(jié)構(gòu)相同，也是直接在選定元素的內(nèi)部追加，不需要跳出選定元素，不同的是append是在選定元素的尾部追加，prepend是在選定元素的開頭追加。

這里列的是針對(duì)初學(xué)jQuery者來說容易搞不懂的部分，我在這里把這些方法列了個(gè)清單，希望大家能看的懂。

如下：

方法	源包裝集/字串	目標(biāo)包裝集體	特性描述
A.append(B)	B	A	若目標(biāo)包裝集只匹配一個(gè)元素，則源(也包括同源包裝集匹配的所有元素)將被移動(dòng)到目標(biāo)位置；若目標(biāo)包裝集包含多個(gè)元素，則源將保留在原來的位置，但同時(shí)復(fù)制一份相同的副本到目標(biāo)位置。由此，若目標(biāo)只匹配一個(gè)元素時(shí)，使用前述方法后源將被刪除。
B.appendTo(A)
A.prepend(B)
B.prependTo(A)
A.before(B)
B.insertBefore(A)
A.after(B)
B.insertAfter(A)