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

Imagine:

想像：

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

What JavaScript can be written to move all the child nodes (both elements, and text nodes) from old-parent to new-parent without jQuery?

可以编写什么JavaScript来将所有子节点（包括元素和文本节点）从旧父移动到没有jQuery的新父节点？

I don't care about whitespace between nodes, though I expect to catch the stray Hello World, they would need to be migrated as-is too.

我不关心节点之间的空白，虽然我希望捕获流浪的Hello World，但它们也需要按原样迁移。

EDIT

编辑

To be clear, I want to end up with:

要清楚，我想最终得到：

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

The answer of the question from which this is a proposed duplicate would result in:

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

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

3 个解决方案

#1

DEMO

DEMO

Basically, you want to loop through each direct descendent of the old-parent node, and move it to the new parent. Any children of a direct descendent will get moved with it.

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

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

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

#2

Here's a simple function:

这是一个简单的功能：

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

el's childNodes are the elements to be moved, newParent is the element el will be moved to, so you would execute the function like:

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);
}

Here is the Demo

这是演示

#3

-1

This answer only really works if you don't need to do anything other than transferring the inner code (innerHTML) from one to the other:

这个答案只有在除了将内部代码（innerHTML）从一个代码转移到另一个代码之外不需要做任何其他事情时才能真正起作用：

// Define old parent
var oldParent = document.getElementById('old-parent');

// Define new parent
var newParent = document.getElementById('new-parent');

// Basically takes the inner code of the old, and places it into the new one
newParent.innerHTML = oldParent.innerHTML;

// Delete / Clear the innerHTML / code of the old Parent
oldParent.innerHTML = '';

Hope this helps!

希望这可以帮助！

#1