replacewith()是最直接的替换方法，现代浏览器原生支持，可原位替换目标元素且不破坏dom结构；replacechild()兼容性好但需手动获取父节点；outerhtml赋值会丢失事件监听器和表单状态；批量替换应避免实时集合，改用静态数组或queryselectorall。
replaceWith() 是最直接的替换方法
现代浏览器（Chrome 64+、Firefox 63+、Safari 12.1+）原生支持 replaceWith()，它能用一个新节点（或多个节点、字符串）原位替换目标元素，不破坏父级结构，也不影响兄弟节点顺序。
常见错误是误用 innerHTML 或 outerHTML：前者只改内容，后者会触发重新解析并丢失事件监听器；而 replaceWith() 保留原有 DOM 关系语义，更符合“替换元素”的本意。
- 支持传入 DOM 节点：
oldEl.replaceWith(newEl) - 支持传入 HTML 字符串：
oldEl.replaceWith('<h2>New</h2>')（注意引号转义） - 支持传入多个参数：
oldEl.replaceWith(el1, el2, 'text') - 不兼容 IE，需 polyfill 或降级处理
document.replaceChild() 需要显式获取父节点
replaceChild() 是 DOM Level 1 就存在的标准 API，兼容性极好，但必须手动拿到父节点才能调用，写法略冗长：
oldEl.parentNode.replaceChild(newEl, oldEl)
容易踩的坑：
- 如果
oldEl没有父节点（比如刚createElement出来还没 append），会报Cannot read property 'replaceChild' of null - 若
newEl已存在于 DOM 中，它会被自动从原位置移除——这是预期行为，不是 bug - 不能传字符串，必须是 Node 实例；想用字符串得先
document.createElement或document.createTextNode
避免 outerHTML = '...' 的隐性陷阱
给 outerHTML 赋值看似简洁：el.outerHTML = '<p>replaced</p>'，但它本质是“删除旧节点 + 插入新解析节点”，会带来三个实际问题：
- 所有绑定在原元素上的事件监听器全部丢失（
addEventListener不会迁移） - 若该元素是
form内的input，其当前value、checked状态不会被新节点继承 - 原元素引用失效：赋值后继续操作
el会报错或无效果
除非你明确需要“销毁重建”，否则不要用 outerHTML 替换元素。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
批量替换多个同名 class 元素时别用 getElementsByClassName
document.getElementsByClassName('placeholder') 返回的是实时集合（live HTMLCollection），当你在循环中调用 replaceWith() 或 replaceChild() 时，每次替换都会导致集合长度动态缩减、索引偏移，结果是只处理一半元素。
正确做法是先转成静态数组：
Array.from(document.getElementsByClassName('placeholder')).forEach(el => el.replaceWith(textNode))
或者更推荐用 querySelectorAll()（返回静态 NodeList）：
document.querySelectorAll('.placeholder').forEach(el => el.replaceWith(textNode))
这个细节在 Firefox/Chrome/Safari 上表现一致，不是浏览器差异，而是 DOM 规范本身的设计。
真正麻烦的不是语法怎么写，而是搞清你要替换的是“节点本身”还是“节点内容”——前者用 replaceWith 或 replaceChild，后者用 textContent 或 innerHTML。混用会导致状态丢失或逻辑错乱，尤其在表单、动画、第三方库集成场景下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
