Reading and modifying the HTML structure of an element or the text content of an element are common DOM operations. jQuery provides two convenient methods for such processing.html() and .text()
html() method
Gets the HTML content of the first matching element in the collection or sets the HTML content of each matching element. There are three specific uses:
.html () Without passing in a value, you get the HTML content of the first matching element in the collection
.html(htmlString) Set the html content of each matching element
.html( function(index , oldhtml) ) is used to return a function that sets the HTML content
Note: The .html() method uses the innerHTML attribute of the DOM for processing, so the most important thing to pay attention to is setting and obtaining. Question, this operation is for the entire HTML content (not just text content)
Let’s look at some examples of the following html() method
How to change html The content of the element code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
$('#dv').html("www.php.cn");
</script>
</body>
</html>Changed the content of the div tag
2. Append content
For example, the above example , we need to append a URL after the php Chinese website, so how do we need to implement it?
Please see the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
$('#dv').append("www.php.cn");
</script>
</body>
</html>As shown in the above example, this will add a www to our div tag The URL of .php.cn
after and before methods
after: Insert HTML content after all matching elements
before: Insert HTML content before all matching elements
For example, in our above example, how to add content before or after the div tag
The following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
$('#dv').before("欢迎来到：");
$("#dv").after("学习编程");
</script>
</body>
</html> text() method
Get the combined text content of each element in the matching element set, including their descendants, or set the text content of each element in the matching element set to the specified text content. , there are three specific uses:
.text() Gets the merged text of each element in the matching element set, including their descendants
.text( textString ) is used to set the content of the matching element The text
.text(function(index, text)) is used to return a function that sets the text content
Please see the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
alert($('#dv').text());
</script>
</body>
</html>
Next Section