一：引言

JavaScript DOM 操作中，innerHTML、innerText 和 outerText 是用于获取或设置元素内容的三个重要属性。

它们的核心区别在于‌是否包含 HTML 标签‌以及‌是否包含元素自身‌

二：区别

(1) innerHTML‌

• ‌功能‌：获取或设置元素起始标签和结束标签之间的 ‌HTML 内容‌。
• ‌特点‌：
• 保留所有的 HTML 标签结构。
• 如果设置值中包含 HTML 标签，浏览器会将其解析为 DOM 节点并渲染。
• 代码

<div id="box"><span>Hello</span></div>
console.log(box.innerHTML); // 输出: "<span>Hello</span>"
box.innerHTML = "<b>World</b>"; // 页面显示加粗的 World

(2) innerText‌

• ‌功能‌：获取或设置元素起始标签和结束标签之间的‌可见文本内容‌。
• ‌特点‌：
• 去除所有 HTML 标签‌，只返回纯文本。
• ‌受 CSS 影响‌：如果子元素被设置为 display: none，其文本不会被包含在 innerText 中。
• ‌触发重排‌：读取 innerText 时，浏览器需要计算样式布局，因此性能开销比 textContent 大。
• 代码

console.log(box.innerText); // 输出: "Hello"
box.innerText = "<b>World</b>"; // 页面显示 literal 字符串 "<b>World</b>"，不会加粗

(3) outerText‌

• ‌功能‌：较老且非标准的属性（主要在 IE 中引入，现代浏览器兼容性不一，通常建议使用 outerHTML 或 textContent 替代）。
• ‌读取时‌：行为与 innerText 几乎相同，返回元素内部的纯文本内容（不包含自身标签）。
• ‌设置时‌：行为与 innerText 不同。设置 outerText 会‌替换掉整个元素（包括其自身标签）‌为指定的文本节点。
• 代码

// 假设 box 是 <div id="box"><span>Hello</span></div>
box.outerText = "New Text";
// 结果：原来的 <div id="box"> 元素直接从 DOM 树中消失，
// 被替换为一个纯文本节点 "New Text"