search

Home >Web Front-end >JS Tutorial >Usage examples of after() method in jQuery

Usage examples of after() method in jQuery

巴扎黑
巴扎黑Original
2017-06-24 11:28:041488browse

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>

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>

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!

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：Analysis on the usage of append() and appendto() in jqueryNext article：Analysis on the usage of append() and appendto() in jquery

Related articles

See more