Home > Article > Web Front-end > Usage examples of insertAfter() method in jQuery

Usage examples of insertAfter() method in jQuery

巴扎黑Original: 2017-06-24 13:25:331558browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery insert node insertAfter and move node insertBefore usage examplesNext article：jQuery insert node insertAfter and move node insertBefore usage examples

See more

Usage examples of insertAfter() method in jQuery

Related articles