如何使用outerHTML将HTML元素拆分为三部分？

我想通过outerHTML把一个HTML元素拆成三部分，但直接给outerHTML添加闭合标签达不到预期效果（示例如下），求可行的实现方法。

现有代码示例 #

HTML结构 #

<div class="content">
  <span class="wrapper">Hello <span class="splitter">w</span>orld!</span>
</div>

<hr>

Result: <div class="result"></div>

<hr>

Expected: <div>&lt;span class=&quot;wrapper&quot;&gt;Hello &lt;/span&gt;&lt;span class=&quot;splitter&quot;&gt;w&lt;/span&gt;&lt;span class=&quot;wrapper&quot;&gt;orld!&lt;/span&gt;</div>

JS代码 #

var content = document.querySelector('.content');
var splitter = document.querySelector('.splitter');
var result = document.querySelector('.result');

splitter.outerHTML = '</span>' + splitter.outerHTML + '<span class="wrapper">';

result.innerText = content.innerHTML;

问题原因 #

浏览器会自动修正DOM结构，直接写入</span>这类未匹配的闭合标签时，会被浏览器忽略或自动补全，无法得到预期的拆分效果。

解决方法 #

直接操作父元素的内容，拆分后重新构建DOM结构：

const content = document.querySelector('.content');
const splitter = document.querySelector('.splitter');
const wrapper = splitter.parentElement;
const result = document.querySelector('.result');

// 拆分出splitter前后的内容节点
const beforeContent = wrapper.childNodes[0];
const afterContent = wrapper.childNodes[2];

// 清空原wrapper
wrapper.innerHTML = '';

// 创建新的wrapper包裹前半内容
const wrapper1 = document.createElement('span');
wrapper1.className = 'wrapper';
wrapper1.appendChild(beforeContent);

// 创建新的wrapper包裹后半内容
const wrapper2 = document.createElement('span');
wrapper2.className = 'wrapper';
wrapper2.appendChild(afterContent);

// 重新组装结构
wrapper.appendChild(wrapper1);
wrapper.appendChild(splitter);
wrapper.appendChild(wrapper2);

// 输出结果
result.innerText = content.innerHTML;

这段代码会将原结构拆分为三个部分，最终得到预期的HTML结构：

<span class="wrapper">Hello </span><span class="splitter">w</span><span class="wrapper">orld!</span>

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