replacechild 是 dom 原生方法，用于用新节点精确替换父元素的指定直属子节点；它不解析 html、不丢失事件监听器，而 innerhtml 会重写整个子树并清空状态。
replaceChild 是什么，它和 innerHTML 有什么区别
replaceChild 是 DOM 节点上的原生方法，用于**用一个新节点替换父元素下的某个现有子节点**。它不解析 HTML 字符串，也不触发重排/重绘以外的副作用，比直接改 innerHTML 更精确、更安全——尤其当你只想换掉某一块结构，又不想清空其他监听器或表单状态时。
常见误区是以为它能“按内容替换”，其实它只认节点引用：必须传入两个参数——newChild 和 oldChild，且 oldChild 必须是当前父节点的**直属子节点**，否则会报错 NotFoundError。
怎么正确调用 replaceChild（带示例）
基本写法：parentNode.replaceChild(newChild, oldChild)。关键在获取到合法的 oldChild 引用。
- 不能用
document.querySelector('.item')后直接传进去——得确认它真是parentNode的子节点，比如：const parent = document.getElementById('list');<br>const oldItem = parent.querySelector('li:first-child');<br>const newItem = document.createElement('li');<br>newItem.textContent = 'New first item';<br>parent.replaceChild(newItem, oldItem); - 如果
oldChild是文本节点，也能换，但要注意空格、换行也是文本节点，容易误判；建议先用nodeType === 1过滤元素节点 -
newChild可以是新创建的节点，也可以是从别处移过来的（比如从另一个父节点removeChild后再塞进来），此时它会自动脱离原位置
replaceChild 失败的三个典型原因
报错不是随机的，基本就这三类：
-
NotFoundError：传入的oldChild不在parentNode的childNodes列表里——可能它已被移走、还没 append、或者你查错了父级 -
HierarchyRequestError：newChild是parentNode自身，或它的某个祖先（即形成循环包含），浏览器禁止这种结构 - 静默失败（无报错但没变）：
oldChild是textNode，但你用querySelector拿到的是Element，类型不匹配；或者用了getElementById却忘了该元素实际不在这个父容器下
替代方案：什么时候不该硬用 replaceChild
如果你只是想“把某个 class 的元素替换成一段 HTML 字符串”，硬套 replaceChild 反而绕路。这时候更自然的做法是：
- 用
oldElement.outerHTML = '<li>...</li>'（简单粗暴，但会丢失事件监听器） - 用
oldElement.replaceWith(newElement)（现代 API，支持传字符串或多个节点，兼容性到 Chrome 64+/Firefox 49+） - 如果要保留老节点上的事件绑定，就别替换，改用
textContent或innerHTML局部更新内容
真正需要 replaceChild 的场景其实很窄：比如在 Shadow DOM 中操作、做细粒度的虚拟 DOM diff 模拟、或必须确保节点引用连续性时——多数日常开发，replaceWith 更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
