Example of append of method usage in jQuery
- 2020-05-09 18:07:43
- OfStack
This article illustrates the use of the append() method in jQuery as an example. Share with you for your reference. The specific analysis is as follows:
This method appends HTML content to the inner tails of all matched elements.
Special note:
This method appends the content and does not delete the previous content.
html content is content that can contain html tags and be rendered by the browser.
The text content first converts the html predefined characters in the content into html character entities so that the html label is not rendered.
Grammatical structure:
$(selector).append(content)
Example code:
Example 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> The home of the script </title>
<style type="text/css">
div
{
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(){
$("div").append("<b> study hard </b>");
})
</script>
</head>
<body>
<div> The original content </div>
</body>
</html>[/size]
[size=2]
Append content to the original div content.
Example 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title> The home of the script </title>
<style type="text/css">
div
{
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").append("<b> study hard </b>");
$(".text").text("<b> study hard </b>");
})
})
</script>
</head>
<body>
<div class="html"></div>
<div class="text"></div>
<button> Click to view </button>
</body>
</html>
From this example, you can observe the difference between HTML content and text content.
I hope this article is helpful to you in jQuery programming.