Example of html of method usage in jQuery
- 2020-05-09 18:07:55
- OfStack
This article illustrates the use of the html() method in jQuery as an example. Share with you for your reference. The specific analysis is as follows:
This method sets and retrieves the HTML content of the matching element, which will be replaced by the content of the new setting.
Special note:
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 1:
$(selector).html()When the method takes no arguments, it gets the html content of the first matched element.
This method is similar to the text() method in that it has no parameter usage, but it is quite different:
1. The html() method gets the contents of the first matched element, while the text() method gets the contents of all matched elements.
2. The html() method gets the html content, while the text() method gets the text content.
Example code:
<!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(){
alert($("div").html());
})
})
</script>
</head>
<body>
<div>
<ul>
<li><span> Welcome to script house </span></li>
</ul>
</div>
<button> Click to view </button>
</body>
</html>
The above code returns the contents of the div element.
Grammatical structure 2:
$(selector).html(content)
With parameters, the html content is set for all matched elements.
This method is similar to the use of the text() method with arguments, but with a big difference:
The html() method sets the html content, while the text() method sets the text content.
Example code:
The following code sets the html content in div to" < b > I'm resetting the content < /b > ".
<!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(){
$("div").html("<b> I'm resetting the content </b>");
})
})
</script>
</head>
<body>
<div> The original content </div>
<button> Click to view </button>
</body>
</html>
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").html("<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 has helped you with your jQuery programming.