innerHTML()、html() 和 innerText() 是用于获取或设置元素内容的不同方法，它们在使用和效果上有一些区别。
1. innerHTML (JavaScript)
innerHTML 是 JavaScript 中用于获取或设置元素的 HTML 内容的属性。它返回元素的所有子元素以及文本内容，包括 HTML 标记。可以用于读取和写入 HTML。
<!DOCTYPE html>
<html>
<head>
<title>innerHTML 示例</title>
</head>
<body>
<div id="myDiv"><p>Hello <strong>World</strong></p></div>
<button onclick="changeContent()">更改内容</button>
<script>
function changeContent() {
var div = document.getElementById("myDiv");
div.innerHTML = "<p>New Content</p>";
}
</script>
</body>
</html>
当点击按钮时，innerHTML 用新的 HTML 内容替换了 <div> 元素的内容。
2. html(jQuery)
html() 是 jQuery 中用于获取或设置元素的 HTML 内容的方法。它与 innerHTML 类似，但是只能用于使用 jQuery 选择器选中的元素。
<!DOCTYPE html>
<html>
<head>
<title>html() 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv"><p>Hello <strong>World</strong></p></div>
<button onclick="changeContent()">更改内容</button>
<script>
function changeContent() {
var div = $("#myDiv");
div.html("<p>New Content</p>");
}
</script>
</body>
</html>
当点击按钮时，html() 方法用新的 HTML 内容替换了 <div> 元素的内容。
3. innerText (JavaScript)
innerText 是 JavaScript 中用于获取或设置元素的文本内容的属性。它返回元素的纯文本内容，不包括 HTML 标记。可以用于读取和写入纯文本内容。
<!DOCTYPE html>
<html>
<head>
<title>innerText 示例</title>
</head>
<body>
<div id="myDiv"><p>Hello <strong>World</strong></p></div>
<button onclick="changeText()">更改文本</button>
<script>
function changeText() {
var div = document.getElementById("myDiv");
div.innerText = "New Text";
}
</script>
</body>
</html>
当点击按钮时，innerText 用新的文本内容替换了 <div> 元素的内容。
总结
innerHTML和html()返回包含 HTML 标记的内容，适用于操作 HTML 结构。innerText返回纯文本内容，适用于操作文本内容。innerHTML和html()主要在使用 JavaScript 或 jQuery 时使用，而innerText是 JavaScript 的一部分，不需要额外的库。
注意：通常用于处理 HTML 结构的情况使用 innerHTML 或 html()，而用于处理纯文本的情况使用 innerText。同时，需要注意在使用 innerHTML 和 html() 时要小心防止跨站点脚本攻击 (XSS)，因为它们可以执行任意的 JavaScript 代码。
