如何使用JavaScript/jQuery展平嵌套HTML DOM节点？

这其实是个典型的DOM结构扁平化需求，要把嵌套的元素全部拉到同一层级，同时保留原来的空容器节点。我给你分别提供原生JavaScript和jQuery两种实现方案，都能精准达到你想要的效果：

方案一：原生JavaScript实现 #

不需要依赖任何库，纯原生API就能搞定，步骤清晰：

// 定位到最外层的容器div（如果页面有多个div，建议给它加个id来精准选择）
const container = document.querySelector('div');
const parentNode = container.parentNode;

// 用来存放最终要输出的所有元素
const finalElements = [];

// 递归遍历所有节点，收集空div和内容元素
function traverseNodes(node) {
  if (node.nodeType === Node.ELEMENT_NODE) {
    if (node.tagName === 'DIV') {
      // 添加一个空的div到结果数组
      finalElements.push(document.createElement('div'));
      // 递归处理当前div的所有子元素
      Array.from(node.children).forEach(child => traverseNodes(child));
    } else {
      // 非div元素直接加入结果（这里是移动原节点，不是克隆）
      finalElements.push(node);
    }
  }
}

// 执行遍历收集
traverseNodes(container);

// 移除原来的嵌套容器，把所有元素添加到父节点
container.remove();
finalElements.forEach(element => parentNode.appendChild(element));

代码解释：

• 我们通过递归遍历所有嵌套节点，遇到div就生成一个空的div加入结果，同时处理它的子元素；
• 遇到非div的元素（比如h2、p、h3）直接加入结果数组；
• 最后移除原来的嵌套容器，把结果数组里的所有元素一次性添加到父节点，就得到了你要的扁平结构。

方案二：jQuery实现 #

如果你的项目已经引入了jQuery，那代码会更简洁，利用jQuery的遍历和集合操作能快速完成：

// 定位最外层容器（同样建议用id选择器避免歧义）
const $container = $('div:first');
let $resultElements = $();

// 遍历所有节点（包括容器本身）
$container.find('*').addBack().each(function() {
  const $current = $(this);
  if ($current.is('div')) {
    // 往结果集合里添加空div
    $resultElements = $resultElements.add($('<div>'));
    // 添加当前div的所有子元素
    $resultElements = $resultElements.add($current.children());
  } else {
    // 非div元素直接加入结果集合
    $resultElements = $resultElements.add($current);
  }
});

// 用结果集合替换原来的嵌套容器
$container.replaceWith($resultElements);

代码解释：

• $container.find('*').addBack()会选中容器内所有嵌套元素包括容器自身；
• 遍历过程中区分div和非div元素：遇到div就添加空div和它的子元素，非div元素直接加入结果；
• 最后用replaceWith把原来的嵌套容器替换成扁平的元素集合，一步到位。

测试一下这两种方案，都能把你给出的嵌套结构转换成：

<div></div> <div></div> <h2>Hello</h2> <p>Hello world</p> <h3>Hello 2</h3>

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