Usage examples of insertAfter() method in jQuery-JS Tutorial-php.cn

Usage examples of insertAfter() method in jQuery

巴扎黑

Release： 2017-06-24 13:25:33

Original

1550 people have browsed it

This article mainly introduces the usage of insertAfter() method in jQuery. The function and definition of insertAfter() method are analyzed with examples, as well as the usage skills of inserting matching elements into another specified element collection. Friends who need it can refer to it. Next

The example in this article describes the usage of insertAfter() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method inserts the matching element after another specified element collection. The
insertAfter() method has the opposite effect than the insertBefore() method.

Grammar structure:

The code is as follows:

$(selector).insertAfter(content)

Parameter list:

Parameter	Description
selector	Define the content to be inserted.
content	Defines after which elements content is inserted.

Example code:

The code is as follows:

<!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>

Copy after login

The above code can insert the p element To the bottom of the p element, which is of course the bottom of the exterior.

The above is the detailed content of Usage examples of insertAfter() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!