如何使用JS将两列文本合并为一列且保留span内部标签

实现方案 #

你可以直接通过DOM节点操作实现，该方案会完整保留span内部的所有子标签，不会破坏原有结构：

// 1. 获取左右列的span元素集合、右列容器
const leftSpans = document.querySelectorAll('.left-col.col span')
const rightSpans = document.querySelectorAll('.right-col.col span')
const rightCol = document.querySelector('.right-col.col')

// 2. 清空右列原有内容，若需要保留右列其他非span内容可跳过此步，调整节点插入位置即可
rightCol.innerHTML = ''

// 3. 按顺序交叉插入左右列的span节点
for(let i = 0; i < leftSpans.length; i++) {
  // 直接append原DOM节点，会自动从原父容器移除，内部嵌套标签、绑定事件都完整保留
  rightCol.appendChild(leftSpans[i])
  // 兼容左右列span数量不一致的情况
  if(rightSpans[i]) {
    rightCol.appendChild(rightSpans[i])
  }
}

// 4. 可选：移除已经为空的左列容器
document.querySelector('.left-col.col').remove()

补充说明 #

• 如果需要保留原有两列结构，仅生成新的合并容器，可以把appendChild的参数替换为leftSpans[i].cloneNode(true)、rightSpans[i].cloneNode(true)，即可复制节点而非移动原有节点
• 若右列span数量比左列多，可以在上述循环结束后追加遍历右列剩余的节点插入到容器末尾

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