這篇文章主要介紹了jQuery中的insertBefore(),insertAfter(),after(),before()區別介紹的相關資料,非常不錯,有參考借鏡價值,需要的朋友可以參考下
insertBefore():a.insertBefore(b)
a在前,b在後,
a:是一個選擇器,b:也是一個選擇器
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script> </head> <body> <p class='p1'>p1:hello</p> hello world <p class='p2'>p2:wenwen</p> hello wo </body> <script type="text/javascript"> $(function(){ $('.p2').insertBefore('.p1'); }) </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='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script> </head> <body> <p class='p1'>p1:hello</p> <p class='p2'>p2:wenwen</p> </body> <script type="text/javascript"> $(function(){ $('.p2').before('.p1'); }) </script> </html>
#
p1:hello .p1 p2:wenwen
,在.p2選擇器的前面位置
after():跟before()是同理的,只是一個在前一個在後
我只是想說insertBefore(),insertAfter()跟before(),after()的區別,我感覺最大一個區別就是看你要用到的場景,你要是需要兩個選擇器的位置調換就用
insertBefore(),insertAfter()
要是需要一個選擇器跟一個文字進行調換位置就可以用before(),after();當然這個不只是調換位置啦
$('<p class='p3'>嘿嘿</p>').insertBefore('.p1');
以上是jQuery中的insertBefore(),insertAfter(),after(),before()區別介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!