Home > Article > Web Front-end > How to use the html() method in jquery
How to use the html() method in jquery
- 醉折花枝作酒筹Original
- 2021-06-08 14:33:285014browse
In JavaScript, the usage of the "html()" method is "element.html (new content of the selected element)". The html method sets or returns the content of the selected element. When this method is used to return content, the content of the first matching element is returned; when this method is used to set content, the content of all matching elements is rewritten.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
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 html character entities, so that the HTML tags will not be rendered.
Syntax structure one:
$(selector).html()
At this time, when the method does not take parameters, it obtains the html content of the first matching element.
This method is similar to the text() method without parameters, but there are still big differences:
1.html() method obtains the content of the first matching element, while text() The method is to obtain the content contained in all matching elements.
2. The html() method obtains the content html content, while the text() method obtains the text content.
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<title></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>欢迎您</span>
</li>
</ul>
</div>
<button>点击查看效果</button>
</body>
</html>The above code will return the content in the div element.
Grammar structure 2:
$(selector).html(content)
With parameters, it sets the html content of all matching elements.
This method is similar to the text() method with parameters, but there is still 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 the div to "a4b561c25d9afb9ac8dc4d70affff419I am the content after reset0d36329ec37a2cc24d42c7229b69747a".
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</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>我是重新设置后的内容</b>");
});
});
</script>
</head>
<body>
<div>原来内容</div>
<button>点击查看效果</button>
</body>
</html>[Recommended learning: javascript advanced tutorial]
The above is the detailed content of How to use the html() method in jquery. For more information, please follow other related articles on the PHP Chinese website!