原生JS使用replaceWith替换元素为DOM字符串或多节点的实现方法

问题背景 #

很多开发者找不到原生JavaScript中replaceWith使用多个元素/节点的相关示例。

现有基础HTML结构 #

<span id="parent"><span>Hardware:</span> <br>
the <span id="oldChild">physical</span> components of a <span>computer</span>.</span>

需求说明 #

需要使用replaceWith将#oldChild子span元素替换为多个元素加文本节点（包含span后的逗号与空格），现有待插入的HTML字符串如下：

const newSpans = 
"<span id=\"newChild1\">kickable</span>, 
 <span id=\"newChild2\">throwable</span>, 
 <span id=\"newChild3\">punchable</span>"

错误写法问题分析 #

以下写法存在明显问题：

oldChild.replaceWith( newSpans );

问题原因：

• replaceWith接收字符串参数时，会将其作为纯文本内容插入，不会解析为HTML节点，直接传入上述字符串只会在页面上显示整段HTML代码，无法得到预期的多个span元素。
• replaceWith支持传入多个节点参数实现多节点替换，但不支持直接传入HTML字符串批量解析为节点。

可行解决方案 #

可以通过临时DOM节点中转解析HTML字符串的方式实现需求，代码如下：

const temp = document.createElement("div") 
temp.innerHTML = newSpans
const oldChild = document.getElementById("oldChild")
oldChild.replaceWith(...temp.childNodes)

实现原理：利用临时div的innerHTML属性把HTML字符串自动解析为真实DOM节点，再通过展开运算符...将所有子节点作为独立参数传入replaceWith，即可完成多节点替换。

注意：应尽量避免直接使用HTML字符串处理节点，优先使用对象、数组等数据结构生成DOM节点实现需求，降低XSS注入风险。

内容的提问来源于stack exchange，提问作者Andrei Cleland