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

Usage examples of after() method in jQuery

巴扎黑

Release： 2017-06-24 11:28:04

Original

1443 people have browsed it

This article mainly introduces the usage of the after() method in jQuery. It analyzes the function, characteristics and usage skills of the after() method in detail in the form of examples. It has certain reference value. Friends who need it can refer to it.

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

This method can append HTML content to the outer tail of each matching element.

Special Note:

This method is to append content, that is, the original content is still there.
HTML content means that the content can contain HTML tags and can be rendered by the browser.
The text content is to first convert the HTML predefined characters in the content into htmlcharacter entities, so that the HTML tags will not be rendered.

Grammar structure:

The code is as follows:

$(selector).after(content)

Example code:

Example 1:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p 
{
  height:150px;
  width:150px;
  
background-color
:green;
  
margin-top
:10px;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("p").after("<b>  好好学习</b>"); 
}) 
</script>
</head>
<body>
<p></p>
</body>
</html>

Copy after login

Append content after the original p content.
Example 2:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p 
{
  height:150px;
  width:150px;
  background-color:green;
  margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){  
  $("button").click(function(){ 
    $(".html").after("<b>好好学习</b>"); 
    $(".text").text("<b>好好学习</b>");     
  }) 
}) 
</script>
</head>
<body>
<p class="html"></p>
<p class="text"></p>
<button>点击查看效果</button>
</body>
</html>

Copy after login

Through this example, you can observe the difference between html content and text content.

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