web-dev-qa-db-ja.com

JavaScriptを使用してすべてのHTML要素の子を別の親に移動する方法は？

想像してみてください：

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

JQueryなしですべての子ノード（要素とテキストノードの両方）をold-parentからnew-parentに移動するために記述できる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>
javascripthtmldom-manipulation
62
Drew Noakes

DEMO

基本的に、古い親ノードのそれぞれの直接の子孫をループし、新しい親に移動します。直接の子孫の子はすべて一緒に移動します。

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

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

簡単な関数を次に示します。

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

elのchildNodesは移動する要素です。newParentはelement 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);
}

デモはこちら

9
Cilan

現代の方法：

newParent.append(...oldParent.childNodes);
  1. .appendは.appendChildの代わりになります。主な違いは、.append('hello!')のように、一度に複数のノードとプレーンな文字列を受け入れることです。
  2. oldParent.childNodesはiterableであるため、...で拡散して.append()の複数のパラメーターになることができます。

両方の互換性テーブル（要するに：Edge 17 +、Safari 10+）：

2
fregante

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

お役に立てれば！

0
ItsJonQ

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>
0
Kamil Kiełczewski