outerHTML赋值可直接替换元素自身及全部子内容：浏览器解析新HTML并用其完全替代原元素，原元素脱离DOM、事件与引用全部失效；区别于innerHTML仅替换内部子节点。
直接给元素的 outerHTML 赋值，就能替换它自身及全部子内容。
基本用法：赋值即替换
outerHTML 是可读写的 DOM 属性。对某个元素设置 outerHTML，浏览器会：
- 解析右侧字符串为合法 HTML 片段
- 用解析后的新节点（可能是一个或多个）完全替换原元素在 DOM 中的位置
- 原元素及其所有子节点、绑定的事件监听器、引用关系全部失效
示例：
const div = document.getElementById('target');div.outerHTML = '<p>新段落</p><span>附带内容</span>';
执行后，#target 这个 <div> 元素从 DOM 中消失，被一个 <p> 和一个 <span> 替代。
立即学习“Java免费学习笔记（深入）”；
注意 innerHTML 和 outerHTML 的关键区别
innerHTML 只替换元素内部（子节点），不碰元素自己；outerHTML 替换的是“整个元素”，包括起始标签、内容、结束标签。
-
el.innerHTML = 'xxx'→ el 还在，只是里面变了 -
el.outerHTML = 'xxx'→ el 不再存在于 DOM 中，被新结构取代
因此，替换后不要再试图访问 el 的父节点、样式或事件——它已脱离 DOM 树。
常见误用与风险
以下操作看似合理，实则危险：
- 拼接不完整标签：
el.outerHTML = '<div class="wrap">' + el.outerHTML + '</div>'—— 浏览器会尝试修复语法，结果不可控 - 在循环中修改正在遍历的元素的 outerHTML —— 容易跳过节点或引发索引错乱
- 依赖替换后的元素引用：
el.outerHTML = '<span>ok</span>'; console.log(el.parentNode);→ 输出null
若需保留事件或精细控制，应改用 replaceChild() 或 insertAdjacentHTML() 配合手动移除。
适用场景建议
outerHTML 最适合一次性、整块替换，比如：
- 模板驱动的组件整体刷新（无事件需保留）
- 服务端返回完整 HTML 片段，直接上屏
- 调试时快速重写某区块结构
只要不依赖原元素后续操作，且内容来源可信、格式完整，outerHTML 就是简洁有效的选择。
