Original link of this article: https://blog.csdn.net/xzk9381/article/details/111881205
1. Set or return the html content of the element
Use $('DOM').html()a method to set or return element html content:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').html("测试完成");
console.log($('#mydiv').html())
})
</script>
</head>
<body>
<div id="mydiv">测试</div>
</body>
</html>
In the above code, if there are child elements in mydiv, the entire child element will be returned as a string.
$('DOM').html() You can also pass a function, and use the return value of the function as the content of the html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').html(x=>10);
console.log($('#mydiv').html());
$('#mydiv').html(function (){
return 20;
});
console.log($('#mydiv').html())
})
</script>
</head>
<body>
<div id="mydiv">测试</div>
</body>
</html>
You can also add child elements directly to the element using this method:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').html("<div id='mydiv2'>测试2</div>");
console.log($('#mydiv').html())
})
</script>
</head>
<body>
<div id="mydiv">测试</div>
</body>
</html>
Original link of this article: https://blog.csdn.net/xzk9381/article/details/111881205
Two, you can set or return the text content of the element
Use $('DOM').text()text content may be provided or return element, the method HTML () method has the following different points:
- If the element contains child elements, the text() method will not return the label of the child element, but only the content of the child element; html() will return the label and content
- If there are spaces in the content of the element, the text() method and html() method will reserve the spaces, but the native innerText method will not reserve the spaces.
- The text() method cannot add child element content to the element
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#mydiv').text(' 测试完成'); // 使用 text 方法设置一个带有空格的内容
console.log($('#mydiv').text()); // 可以打印内容（带有空格）
console.log(mydiv.innerText); // 使用原生的方法打印不带空格
console.log($('#mydiv').text() == $('#mydiv').html()) // 两个方法获取的值是相等的
$('#mydiv').html($('#mydiv').text() + '<div> 测试2</div>') // 使用 html 方法向其中添加子标签
console.log($('#mydiv').text() == $('#mydiv').html()) // 这样两个方法获取到的值是不相等的
})
</script>
</head>
<body>
<div id="mydiv">
测试
</div>
</body>
</html>
Original link of this article: https://blog.csdn.net/xzk9381/article/details/111881205