概述🔖

---

我们来详细解释一下 innerHTML 和 outerHTML 的区别。这是一个在前端开发中非常基础且重要的概念。

简单来说，二者的核心区别在于是否包含元素本身：innerHTML 只获取或设置元素内部的 HTML 内容，不包含元素自身的标签；outerHTML 则会获取或设置包含元素自身标签在内的完整 HTML 内容。

一、核心定义与区别🔖

---

假设我们有如下 HTML 结构：

<div id="test" class="box">
  <p>Hello <span>World</span></p>
</div>

1. innerHTML

• 含义：获取 / 设置元素内部的 HTML 内容（即元素起始标签和结束标签之间的所有内容）。
• 获取结果：只会返回元素内部的子节点 HTML，不包含元素自身的标签（div#test 本身）。

const el = document.getElementById('test');
console.log(el.innerHTML);
// 输出：<p>Hello <span>World</span></p>

• 设置结果：会替换元素内部的所有内容（子节点），元素自身的标签和属性（如 id="test"、class="box"）保持不变。

el.innerHTML = '<p>New Content</p>';
// 设置后 HTML 变为：
// <div id="test" class="box">
//   <p>New Content</p>
// </div>

2. outerHTML

• 含义：获取 / 设置元素自身及内部的完整 HTML 内容（包含元素自身的起始标签、属性和内部所有子节点）。
• 获取结果：会返回包含元素自身标签在内的完整 HTML 字符串。

const el = document.getElementById('test');
console.log(el.outerHTML);
// 输出：<div id="test" class="box"><p>Hello <span>World</span></p></div>

• 设置结果：会直接替换整个元素（包括元素自身的标签和属性）为新的 HTML 内容，原元素会被移除，新内容会插入到原元素的位置。

el.outerHTML = '<div id="new" class="new-box">New Outer Content</div>';
// 设置后 HTML 变为：
// <div id="new" class="new-box">New Outer Content</div>
// 注意：原 div#test 已被完全替换，el 变量仍指向原元素（但已从 DOM 中移除）

二、关键区别总结🔖

---

特性	innerHTML	outerHTML
获取内容	仅元素内部的 HTML（子节点）	元素自身标签 + 内部 HTML（完整内容）
设置内容	替换元素内部子节点，自身标签 / 属性不变	替换整个元素（自身 + 内部），原元素移除
返回 / 操作对象	元素的子节点集合	包含元素自身的完整 HTML 片段
DOM 影响	仅修改元素内部结构	可能导致元素自身被替换（DOM 节点变更）

总结🔖

---

• 想操作元素内部内容 → 用 innerHTML；
• 想操作元素自身（包括标签） → 用 outerHTML；
• 优先使用 innerHTML（更常用、更安全），outerHTML 仅在需要替换整个元素时使用。