前端知识点---innerHTML和innerText

*星之卡比*

于 2025-03-24 17:09:09 发布

阅读量359

点赞数 10

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：前端

本文链接：https://blog.csdn.net/2302_80171619/article/details/146480895

javascript 专栏收录该内容

19 篇文章

订阅专栏

✅ 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 更安全。