如何使用JavaScript将所有HTML元素子项移动到另一个父项？

Question

想像:

<div id="old-parent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>
<div id="new-parent"></div>

可以编写什么JavaScript来移动所有子节点(包括元素和文本节点)old-parent到new-parent没有jQuery？

我并不关心节点之间的空白,虽然我希望能够抓住流浪Hello World,但它们也需要按原样迁移.

编辑

要清楚,我想最终得到:

<div id="old-parent"></div>
<div id="new-parent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>

提出重复的问题的答案将导致:

<div id="new-parent">
    <div id="old-parent">
        <span>Foo</span>
        <b>Bar</b>
        Hello World
    </div>
</div>

Answer 1

DEMO

基本上,您希望循环遍历旧父节点的每个直接后代,并将其移动到新父节点.任何直系后代的孩子都会被它带走.

var newParent = document.getElementById('new-parent');
var oldParent = document.getElementById('old-parent');

while (oldParent.childNodes.length > 0) {
    newParent.appendChild(oldParent.childNodes[0]);
}

Answer 2

现代方式：

newParent.append(...oldParent.childNodes);

1. .append是 的替代品.appendChild。主要区别在于它一次接受多个节点，甚至是纯字符串，例如.append('hello!')
2. oldParent.childNodes是可迭代的，所以它可以传播...为多个参数.append()

两者的兼容性表（简称：Edge 17+，Safari 10+）：

• https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Browser_compatibility
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Browser_compatibility

Answer 3

这是一个简单的功能:

function setParent(el, newParent)
{
    newParent.appendChild(el);
}

el的childNodes是要移动的元素, newParent是元素el将被移动到,所以你将执行的功能等:

var l = document.getElementById('old-parent').childNodes.length;
var a = document.getElementById('old-parent');
var b = document.getElementById('new-parent');
for (var i = l; i >= 0; i--)
{
    setParent(a.childNodes[0], b);
}

这是Demo