前端知识点---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 的使用

1. 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>

2. 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>

3. innerHTML 设置内容

document.getElementById('example').innerHTML = '<p>新的 <strong>HTML</strong> 内容！</p>'

4. innerText 设置内容

document.getElementById('example').innerText = '新的纯文本内容！';

✅ 总结：

• innerHTML 主要用于处理 HTML 内容（包括标签），并且可以动态插入 HTML 代码。但它的使用需要小心，尤其是在处理用户输入时，因为可能引发 XSS 攻击。

• innerText 仅操作纯文本内容，适合用来获取或设置文本，忽略 HTML 标签和样式。相较之下，innerText 更安全。