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

想像：

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

old-parent在new-parent不使用jQuery的情况下，可以编写哪种JavaScript将所有子节点（元素和文本节点）从移到？

我不在乎节点之间的空格，尽管我希望能抓住一些麻烦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>

演示

基本上，您想遍历旧父节点的每个直接后代，并将其移动到新父节点。直接后代的任何子代都将随之移动。

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

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

这是一个简单的函数：

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

这是演示

现代方式：

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

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

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

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

仅当您除了将内部代码（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 = '';

希望这可以帮助！

如果您不使用-ID的名称，则可以执行此操作

oldParent.id='xxx';
newParent.id='oldParent';
xxx.id='newParent';
oldParent.parentNode.insertBefore(oldParent,newParent);

#newParent { color: red }

<div id="oldParent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>
<div id="newParent"></div>