innerText 和 innerHTML 的区别

在编写 JavaScript 代码时，经常用到 innerText 和 innerHTML 这两个属性来操作 DOM 元素的内容。两者都可以用来获取和设置 DOM 元素的文本内容，但是它们之间有一些重要的区别。本文将对 innerText 和 innerHTML 的区别进行详细介绍。

innerText

innerText 是 DOM 元素的一个属性。它是一个字符串，用于表示元素的显示文本。它会返回元素和它的子元素的纯文本内容，不包括 HTML 标签和注释。例如：

let div = document.getElementById('myDiv');
console.log(div.innerText); // 只返回"这是一段文本"

上述代码中，如果 DOM 结构如下：

<div id='myDiv'>
  这是一段 <span>文本</span>
</div>

则 div.innerText 仅返回 "这是一段文本"。它不会返回 <span> 标签，因为它仅返回文本内容。

另外一个需要注意的是，innerText 不会返回被 CSS 隐藏的元素内容。例如：

<div id='myDiv' style='display: none;'>
  这是一段文本
</div>

let div = document.getElementById('myDiv');
console.log(div.innerText); // 返回空字符串

在上述代码中，即使 div 元素中有一段文本，但由于它的 style 属性设置为 display: none;，所以 innerText 不会返回任何文本内容。

innerHTML

innerHTML 也是 DOM 元素的一个属性，它返回元素的 HTML 内容，包括 HTML 标签和注释。例如：

let div = document.getElementById('myDiv');
console.log(div.innerHTML); // 返回 "<span>这是一段文本</span>"

在上述代码中，div 元素包含一个 <span> 标签以及文本内容，innerHTML 返回了这些 HTML 元素和文本。

innerHTML 还可以用于设置元素的 HTML 内容。例如：

let div = document.getElementById('myDiv');
div.innerHTML = "<p>这是一个新的段落</p>";

上述代码将替换 div 元素原来的内容，设置为一个带有新 <p> 标签的字符串。

需要注意的是，innerHTML 也会执行 JavaScript 代码。如果 HTML 内容中包含 JavaScript 代码，则这些代码也会被执行，从而有安全风险。因此，应该避免使用 innerHTML 来设置不受信任的 HTML 内容。

总结

innerText 和 innerHTML 都可以用于获取和设置元素的文本内容，但它们之间有一些重要的区别。

• innerText 返回元素和它的子元素的纯文本内容，不包括 HTML 标签和注释。
• innerHTML 返回元素的 HTML 内容，包括 HTML 标签和注释。
• innerHTML 可以用于设置元素的 HTML 内容，但有安全风险。

因此，应根据具体情况选择使用 innerText 或 innerHTML，避免潜在的安全问题。