本文原文链接：https://blog.csdn.net/xzk9381/article/details/111881205
一、设置或返回元素的 html 内容
使用 $('DOM').html() 方法可以设置或返回元素的 html 内容：
<!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>
上面的代码中，如果 mydiv 中还有子元素，那么子元素整体会作为字符串返回。
$('DOM').html() 也可以传递一个函数，使用函数的返回值作为 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>
使用该方法也可以直接向元素中添加子元素：
<!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>
本文原文链接：https://blog.csdn.net/xzk9381/article/details/111881205
二、可以设置或返回元素的 text 内容
使用 $('DOM').text() 可以设置或返回元素的 text 内容，该方法与 html() 方法有如下几点不同：
- 如果元素中包含子元素，text() 方法不会返回子元素的标签，而只是返回子元素的内容；html() 会返回标签和内容
- 如果元素中的内容有空格，text() 方法 和 html() 方法会保留空格，但是原生的 innerText 方法则不会保留空格。
- text() 方法不可以向元素中添加子元素内容
<!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>
本文原文链接：https://blog.csdn.net/xzk9381/article/details/111881205