欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中append、insertBefore、after與insertAfter的簡單用法與注意事項

 更新時間：2023年05月26日 23:15:43   投稿：mdxy-dxy  
這篇文章主要為大家介紹了jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after與insertAfter方法注意事項,需要的朋友可以參考下

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

功能說明

對比的看

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都是元素里面操作，這樣就比較簡單了

實例分析

簡單代碼：

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

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

測試代碼

<!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>");

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

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

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

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

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

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

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

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

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

HTML標(biāo)簽：

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

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

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

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

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

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

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

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

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

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

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

代碼執(zhí)行之前

代碼執(zhí)行以后

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

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

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

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

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

所有基于這個原理，我們看一下基于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);
 }
 });

是不是感覺很酷呢

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

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

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

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

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

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

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

如下：

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

舉例說明：在上圖中，A.append(B)表示把B添加到與A匹配的所有元素的現(xiàn)有內(nèi)容后面，因此B是源，A是目標(biāo)包裝集。

相關(guān)文章

最新評論