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

想像:

    Foo
    Bar
    Hello World

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

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

编辑

要清楚,我想最终得到:

    Foo
    Bar
    Hello World

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

    

        Foo
        Bar
        Hello World
    

crush.. 96

DEMO

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

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

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

`while(oldParent.hasChildNodes())newParent.appendChild(oldParent.firstChild);`和`while(oldParent.firstChild)newParent.appendChild(oldParent.firstChild);`在Chromium中工作速度提高2倍,在Firefox中工作速度提高6倍到10倍.[您修改过的JSPerf](https://jsperf.com/childnodes-array-access-vs-firstchild/2) (12认同)

要真正有效:`while(oldParent.childNodes.length){newParent.appendChild(oldParent.firstChild); }` (5认同)

@Gibolt我创建了一个[JSPerf](http://jsperf.com/childnodes-array-access-vs-firstchild)测试,它似乎告诉我数组访问比调用`firstChild`更快.这种差异最多可以忽略不计.它可能会因浏览器而异.我认为`firstChild`更具可读性. (5认同)

注意,childNodes []通常也包含空文本节点(源代码中每个换行符一个). (4认同)

使用DocumentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment并在演出结束后立即移动所有元素可能是有益的. (2认同)

Cilan.. 9

这是一个简单的功能:

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