[解決済み] JavaScriptを使用して、すべてのHTML要素の子を別の親に移動する方法は？

質問内容

想像してみてください。

<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 の場合、それらもそのまま移行する必要があります。

EDIT

はっきり言って、終わらせたいです。

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

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

#old-parent {
  background-color: red;
}

#new-parent {
  background-color: green;
}

<div id="old-parent">
  <span>Foo</span>
  <b>Bar</b> Hello World
</div>
<div id="new-parent"></div>
<br>
<button onclick="move()" id="button">Move childs</button>

外部リンク