【JavaScript】DOM 修改元素内容详解：`innerText` 与 `innerHTML`

在前端开发中，修改网页元素的内容是非常常见的需求。JavaScript 提供了多种方式来操作 DOM 元素的内容，其中最常见的两种是 innerText 和 innerHTML。它们的功能类似，但各有不同的应用场景与注意事项。本文将详细介绍 innerText 和 innerHTML 的区别与使用技巧，帮助开发者在实际项目中做出最佳选择。

一、DOM 简介

1. DOM 是什么？

DOM（Document Object Model，文档对象模型）是一种接口，允许开发者使用编程语言（如 JavaScript）来访问和操作 HTML 或 XML 文档的结构。通过 DOM，网页的元素可以被动态地创建、修改或删除。

2. 修改 DOM 元素内容的需求

在前端开发中，动态更新网页的内容是常见的需求，例如响应用户输入、展示服务器返回的数据或根据条件修改页面元素。这些操作通常涉及到对 DOM 中的文本或 HTML 结构进行修改，而 innerText 和 innerHTML 是两种常见的方式。

二、innerText 和 innerHTML 简介

1. innerText 的定义与用法

innerText 是 DOM 元素的属性，用来获取或设置元素内部的文本内容。与 textContent 类似，但 innerText 更加关注元素的可见文本，即它只返回用户在页面上实际看到的文本内容。

示例：

<div id="example">Hello, <span style="display:none;">world</span>!</div>

<script>
  const element = document.getElementById("example");
  console.log(element.innerText); // 输出 "Hello,"
</script>

在这个例子中，span 元素被设置为 display: none;，因此 innerText 并不会返回 span 内的文本 “world”。

2. innerHTML 的定义与用法

innerHTML 是另一个 DOM 元素的属性，它不仅可以获取或设置元素的文本内容，还可以包含 HTML 标签。这意味着通过 innerHTML，你可以直接操纵元素内的 HTML 结构。

示例：

<div id="example">Hello, <span>world</span>!</div>

<script>
  const element = document.getElementById("example");
  console.log(element.innerHTML); // 输出 "Hello, <span>world</span>!"
</script>

与 innerText 不同，innerHTML 会返回元素内的完整 HTML 结构，包括子元素。

三、innerText 与 innerHTML 的主要区别

1. 文本内容与 HTML 结构的区别

• innerText：只能获取或设置元素的纯文本内容。它忽略了元素内的 HTML 标签，只处理可见的文本。
• innerHTML：可以获取或设置元素的HTML 结构，包括标签和文本。

2. 性能差异

innerText 在获取内容时，浏览器会进行样式计算，以确定哪些文本是可见的，哪些文本需要排除。这意味着在页面内容复杂或频繁操作时，innerText 的性能可能会稍微逊色于 innerHTML。

示例：

<div id="example">Hello, <span style="display:none;">world</span>!</div>

<script>
  const element = document.getElementById("example");
  console.time("innerText");
  for (let i = 0; i < 10000; i++) {
    const text = element.innerText;
  }
  console.timeEnd("innerText");

  console.time("innerHTML");
  for (let i = 0; i < 10000; i++) {
    const html = element.innerHTML;
  }
  console.timeEnd("innerHTML");
</script>

在这个例子中，innerText 需要额外的计算时间来处理元素的样式和可见性，而 innerHTML 只是直接获取或设置 HTML 结构，因此可能会更快。

3. 安全性

使用 innerHTML 时需要注意安全问题，尤其是在处理来自用户输入或不受信任的外部数据时，直接将这些数据插入到 innerHTML 中可能会导致 XSS（跨站脚本攻击）。而 innerText 只处理纯文本内容，因此更加安全。

不安全的例子：

<div id="example"></div>

<script>
  const userInput = "<img src=x οnerrοr=alert('XSS')>";
  document.getElementById("example").innerHTML = userInput; // 会执行恶意代码
</script>

安全的例子：

<div id="example"></div>

<script>
  const userInput = "<img src=x οnerrοr=alert('XSS')>";
  document.getElementById("example").innerText = userInput; // 仅显示纯文本 "<img src=x οnerrοr=alert('XSS')>"
</script>

四、innerText 和 innerHTML 的常见应用场景

1. innerText 的应用场景

• 显示或隐藏文本：当需要动态更新可见文本时，innerText 是一个非常好的选择。例如，响应用户操作时更新按钮上的文本。
• 从页面中获取纯文本内容：例如在文本统计、数据收集等需要提取纯文本的场景中，innerText 是理想的选择。

示例：

<button id="myButton">点击我</button>

<script>
  const button = document.getElementById("myButton");
  button.innerText = "已点击"; // 更新按钮上的文本
</script>

2. innerHTML 的应用场景

• 动态创建 HTML 结构：当需要根据用户输入或外部数据生成复杂的 HTML 结构时，innerHTML 是最直接的选择。
• 插入多种类型的内容：包括 HTML 标签、文本、图片等。

示例：

<div id="content"></div>

<script>
  const newContent = "<p>这是一段新的内容。</p><a href='#'>点击这里</a>";
  document.getElementById("content").innerHTML = newContent;
</script>

五、使用建议

1. 优先使用 innerText 处理文本

如果只是简单地更新或读取文本内容，使用 innerText 是最佳选择，因为它更加安全且能避免潜在的 XSS 攻击风险。

2. 在使用 innerHTML 时注意安全

如果必须使用 innerHTML 来插入 HTML 结构，请确保对外部输入进行严格的校验和消毒，避免将不受信任的数据直接插入页面。

3. 避免频繁操作 innerText 或 innerHTML

频繁操作 DOM 会导致性能下降，因此在实际项目中，应尽量减少频繁的 DOM 操作，尤其是在大量元素上进行操作时。

六、总结

innerText 和 innerHTML 是 JavaScript 中常用的 DOM 操作方法，它们各自有着不同的特点和应用场景。innerText 更适合处理纯文本，安全性较高，而 innerHTML 则更灵活，适合处理 HTML 结构。在实际开发中，根据需求选择合适的方法能够提升代码的效率和安全性。

推荐：

• JavaScript
• react
• vue

---