replaceWith是原生DOM方法，只能在JavaScript中调用，需确保元素已挂载且非null；传入HTML字符串会自动解析，支持多参数，但未挂载节点调用静默失败。
replaceWith 不是 HTML 的语法，它根本不能写在 HTML 标签里或属性中——你写 <div>xxx</div>.replaceWith(...)，浏览器会直接忽略或报错。它只在 JavaScript 环境中有效，且必须作用于已挂载的 DOM 元素节点。
怎么安全调用 replaceWith？必须等元素真实存在
脚本执行时，如果目标元素还没解析进 DOM，document.querySelector 会返回 null，接着调 null.replaceWith() 就抛 TypeError: Cannot read property 'replaceWith' of null。
- 把
<script>放在</body>前（最简单） - 或加
DOMContentLoaded监听 - 或给 script 加
defer属性
别在 <head> 里直接执行查找+替换逻辑。
传字符串会自动解析吗？会，但只限于单个 HTML 片段
el.replaceWith('<p>hi</p>') 是合法的，现代浏览器（Chrome 65+、Firefox 49+、Safari 11.1+）会把它当作 HTML 字符串解析成节点再插入，el 自身被完整移除。
立即学习“前端免费学习笔记（深入）”；
- 支持多参数：比如
el.replaceWith('<hr>', document.createTextNode('text')) - 不支持嵌套多个顶层标签的字符串，如
'<div></div><p></p>'—— 它只会生成一个 DocumentFragment，但部分老环境行为不一致 - 若需稳定解析复杂 HTML，优先用
template元素：temp.innerHTML = str; el.replaceWith(temp.content.cloneNode(true))
为什么不用 outerHTML =？两者行为有本质区别
el.outerHTML = '<section>new</section>' 看似更短，但它会触发一次 DOM 替换 + 重排，并丢失原元素上所有事件监听器（哪怕没手动绑，框架如 Vue/React 可能已内部绑定）；而 replaceWith 是原子操作，旧节点彻底脱离树，新节点精准顶替其位置（包括在父节点 childNodes 中的索引）。
-
replaceWith能传入真实Node对象（如document.createElement('span')），保留 JS 引用关系 -
outerHTML只接受字符串，无法传入已有节点或文本节点混合体 -
replaceWith不依赖父节点引用，replaceChild则必须显式调用父节点方法
jQuery 的 replaceWith 和原生的不是一回事
如果你引入了 jQuery，$('selector').replaceWith(...) 是 jQuery 封装的方法，它内部做了容错（比如对 null 不报错）、支持函数参数、返回 jQuery 对象可链式调用——但它的底层仍是调用原生 DOM 操作，且会清空原元素绑定的所有数据和事件。
- 原生
replaceWith返回undefined；jQuery 版本返回 jQuery 对象 - jQuery 的
replaceWith('<div></div>')会用jQuery.parseHTML解析，兼容性比原生略好（尤其 IE），但已无必要——现代项目应优先用原生 - 混用时注意：jQuery 对象不能直接传给原生
replaceWith，得先取[0]或用.get(0)
最容易被忽略的一点：replaceWith 对未挂载节点（比如刚 createElement 出来但没 appendChild 过的元素）静默失败——既不报错，也不生效。务必确认目标元素已在 DOM 树中，哪怕只是临时 append 到 document.body 再操作。
