JavaScript中替换标签同时保留内部标签的实现问题

你之前的代码只完成了标签替换，但没有将原<ol>内的<li>元素转移到新的<ul>中，所以内容会丢失。下面是两种可行的解决方案：

方法一：直接转移原节点 #

这种方法不需要克隆，直接将<ol>的子节点移动到新<ul>中，效率更高：

const actual = document.getElementById('actual');
const olElement = actual.children[0];
const ulReplace = document.createElement('ul');

// 循环将ol的所有子节点移到ul中
while (olElement.firstChild) {
  ulReplace.appendChild(olElement.firstChild);
}

// 替换原ol标签
olElement.replaceWith(ulReplace);

原理：调用appendChild移动节点时，节点会自动从原父元素中移除，所以循环处理firstChild就能把所有子元素转移到新<ul>里，再替换原标签即可保留内容。

方法二：克隆子节点后添加 #

如果需要保留原<ol>节点（不直接移除），可以用克隆的方式：

const actual = document.getElementById('actual');
const olElement = actual.children[0];
const ulReplace = document.createElement('ul');

// 深克隆ol的所有子元素，再转换为数组遍历添加
Array.from(olElement.cloneNode(true).children).forEach(li => {
  ulReplace.appendChild(li);
});

// 替换原ol标签
olElement.replaceWith(ulReplace);

原理：cloneNode(true)会深克隆整个<ol>及其子元素，取出克隆后的子节点添加到新<ul>，再替换原标签，这样原节点的内容不会被影响。

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