首頁  >  文章  >  web前端  >  jQuery中insertAfter()方法用法實例

jQuery中insertAfter()方法用法實例

巴扎黑
巴扎黑原創
2017-06-24 13:25:331549瀏覽

這篇文章主要介紹了jQuery中insertAfter()方法用法,實例分析了insertAfter()方法的功能、定義及匹配的元素插入到另一個指定的元素集合後面的使用技巧,需要的朋友可以參考下

本文實例講述了jQuery中insertAfter()方法用法。分享給大家供大家參考。具體分析如下:

此方法把符合的元素插入到另一個指定的元素集合的後面。
insertAfter()方法與insertBefore()方法的作用相反。

語法結構:

程式碼如下:

$(selector).insertAfter(content)

參數清單:

#參數 ##描述
#selector 定義要插入的內容。
content #定義在哪些元素之後插入內容。

實例程式碼:

#程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>insertAfter()
函数
-脚本之家</title> 
<style type="text/css"> 
p{ 
  width:100px; 
  height:100px; 
  border:1px solid red; 
} 
p{ 
  width:200px; 
  height:200px; 
  border:1px solid blue; 
} 
</style> 
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(
document
).ready(function(){ 
  $("button").click(function(){ 
    $("p").insertAfter("p"); 
  }) 
}); 
</script> 
</head> 
<body> 
<p>我的前面会被插入内容</p> 
<p>我是p元素</p> 
<button>点击查看效果</button> 
</body> 
</html>

以上程式碼可以將p元素插入到p元素的下面,當然是外部的下面。

以上是jQuery中insertAfter()方法用法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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