Rumah > Artikel > hujung hadapan web > jQuery中insertAfter()方法用法实例

jQuery中insertAfter()方法用法实例

巴扎黑asal: 2017-06-24 13:25:331550semak imbas

这篇文章主要介绍了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元素的下面，当然是外部的下面。

Atas ialah kandungan terperinci jQuery中insertAfter()方法用法实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery插入节点insertAfter和移动节点insertBefore用法示例Artikel seterusnya：jQuery.wrap() 函数详解

Artikel berkaitan

Lihat lagi