javascript - 展平嵌套的 HTML DOM 节点

Question

给定一个像这样的 HTML 片段:

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

我想将其“压平”为:

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

如何使用 Javascript/jQuery 做到这一点？

Answer 1

for (var i = 0; i < document.body.children.length; i++) {
    var e = document.body.children[i];
    for (var child of e.children) {
        document.body.appendChild(child);
    }

}

因为 document.body.children 是一个“实时”集合，它会随着您将项目附加到正文而发生变化，因此您的正文本身将充当要在 a 中处理的元素的队列。横向遍历。

(我混合循环类型是因为我不能 100% 确定迭代器与实时集合的工作方式相同，而且我不在计算机上进行检查。如果我或某人可以确认 for ( document.body.children 的 var e) 工作方式相同，我将更新解决方案。)