JavaScriptを使用してすべてのHTML要素の子を別の親に移動するにはどうすればよいですか？

想像してみてください：

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

JavaScriptはからすべての子ノード（両方の要素、およびテキストノード）を移動するために書き込むことができますどのようold-parentにnew-parentjQueryをせずに？

ノード間の空白は気にしませんが、迷子をキャッチすることを期待していますが、ノードも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]);
}

現代的な方法：

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

簡単な関数は次のとおりです。

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

これがデモです

この答えは、内部コード（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>