前端知识点---innerHTML和innerText
✅ innerHTML 与 innerText 对比
| 特性 | innerHTML | innerText |
|---|---|---|
| 返回值 | 返回元素的 HTML 内容，包括标签和文本。 | 返回元素的可见文本，不包括 HTML 标签。 |
| 设置值 | 设置元素的 HTML 内容，可以包含标签。 | 设置元素的纯文本内容，不包括 HTML 标签。 |
| 影响样式 | 不考虑 CSS 样式，返回包括隐藏的元素的 HTML。 | 考虑 CSS 样式（如 display: none），不会返回被隐藏的文本。 |
| 性能 | 使用 innerHTML 可能会影响性能，特别是操作大量 DOM 时，因为它需要解析 HTML 代码。 | innerText 仅操作文本内容，相对来说性能较高。 |
| 安全性 | 设置 innerHTML 时，可能会导致 XSS（跨站脚本攻击）漏洞，特别是用户输入时。 | 设置 innerText 更加安全，不会导致 XSS 漏洞。 |
✅ 示例：innerHTML 和 innerText 的使用
- innerHTML 示例
<div id="example">
<p>This is <strong>HTML</strong> content.</p>
</div>
<script>
// 获取 HTML 内容
console.log(document.getElementById('example').innerHTML);
// 输出：<p>This is <strong>HTML</strong> content.</p>
</script>
- innerText 示例
<div id="example">
<p>This is <strong>HTML</strong> content.</p>
</div>
<script>
// 获取可见文本
console.log(document.getElementById('example').innerText);
// 输出：This is HTML content. (忽略了 <strong> 标签)
</script>
- innerHTML 设置内容
document.getElementById('example').innerHTML = '<p>新的 <strong>HTML</strong> 内容！</p>'
- innerText 设置内容
document.getElementById('example').innerText = '新的纯文本内容！';
✅ 总结：
-
innerHTML 主要用于处理 HTML 内容（包括标签），并且可以动态插入 HTML 代码。但它的使用需要小心，尤其是在处理用户输入时，因为可能引发 XSS 攻击。
-
innerText 仅操作纯文本内容，适合用来获取或设置文本，忽略 HTML 标签和样式。相较之下，innerText 更安全。