jQuery中的insertBefore(),insertAfter(),after(),before()區別介紹-js教程-PHP中文網

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

巴扎黑

發布： 2017-06-24 13:17:31

原創

1411 人瀏覽過

這篇文章主要介紹了 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)

　　　　　，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中文網其他相關文章！