首頁  >  文章  >  web前端  >  jQuery中的insertBefore(),insertAfter(),after(),before()區別介紹

jQuery中的insertBefore(),insertAfter(),after(),before()區別介紹

巴扎黑
巴扎黑原創
2017-06-24 13:17:311385瀏覽

這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區別介紹的相關資料,非常不錯,有參考借鏡價值,需要的朋友可以參考下

insertBefore():a.insertBefore(b)

       a在前,b在後,

       a:是一個選擇器,b:也是一個選擇器


<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>jqu</title>
<script type="text/javascript" src=&#39;jquery-2.2.0.min.js&#39;></script>
</head>
<body>
<p class=&#39;p1&#39;>p1:hello</p>
hello world
<p class=&#39;p2&#39;>p2:wenwen</p>
hello wo
</body>
<script type="text/javascript">
$(function(){
$(&#39;.p2&#39;).insertBefore(&#39;.p1&#39;);
})
</script>
</html>

得到:



p2:wenwen
p1:hello
hello world hello wo

insertAfter():跟insertBefore()是一樣的道理

      a.insertAfter(b)

   a.insertAfter(b)

     ,b在前

現在是說before()

before():a.before()

     a是頁面上已有的選擇器,b是你需要添加的內容,注意:是什麼就是什麼,會識別標籤,b不是一個選擇器

     a在後,b在前


<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;UTF-8&#39;>
<title>jqu</title>
<script type="text/javascript" src=&#39;jquery-2.2.0.min.js&#39;></script>
</head>
<body>
<p class=&#39;p1&#39;>p1:hello</p>
<p class=&#39;p2&#39;>p2:wenwen</p>
</body>
<script type="text/javascript">
$(function(){
$(&#39;.p2&#39;).before(&#39;.p1&#39;);
})
</script>
</html>

最後得到:

#

p1:hello
.p1
p2:wenwen

看到嗎? .p1不識別選擇器,直接就是

字串

,在.p2選擇器的前面位置

after():跟before()是同理的,只是一個在前一個在後

我只是想說insertBefore(),insertAfter()跟before(),after()的區別,我感覺最大一個區別就是看你要用到的場景,你要是需要兩個選擇器的位置調換就用

insertBefore(),insertAfter()


要是需要一個選擇器跟一個文字進行調換位置就可以用before(),after();當然這個不只是調換位置啦

######調換位置是說頁面上已經存在的東西,這個方法裡面也可以加頁面上沒有的東西,比如:############
$(&#39;<p class=&#39;p3&#39;>嘿嘿</p>&#39;).insertBefore(&#39;.p1&#39;);

以上是jQuery中的insertBefore(),insertAfter(),after(),before()區別介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn