Home > Article > Web Front-end > Usage examples of after() method in jQuery
Usage examples of after() method in jQuery
- 巴扎黑Original
- 2017-06-24 11:28:041388browse
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!