Wie verschiebe ich alle untergeordneten HTML-Elementelemente mit JavaScript auf ein anderes übergeordnetes Element?

Vorstellen:

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

Welches JavaScript kann geschrieben werden, um alle untergeordneten Knoten (sowohl Elemente als auch Textknoten) von old-parentnach zu verschieben?new-parent , ohne jQuery?

Leerzeichen zwischen Knoten sind mir egal, obwohl ich davon ausgehe Hello World, dass sie den Streuner auffangen , müssten sie auch so wie sie sind migriert werden.

BEARBEITEN

Um klar zu sein, möchte ich am Ende Folgendes haben:

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

Die Antwort auf die Frage, aus der dies ein vorgeschlagenes Duplikat ist, würde ergeben:

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

DEMO

Grundsätzlich möchten Sie jeden direkten Nachkommen des alten übergeordneten Knotens durchlaufen und auf den neuen übergeordneten Knoten verschieben. Alle Kinder eines direkten Nachkommen werden damit bewegt.

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

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

Hier ist eine einfache Funktion:

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

el's childNodessind die Elemente, die verschoben werden sollen, newParent ist das Element, elin das verschoben werden soll, so dass Sie die Funktion wie folgt ausführen würden:

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

Hier ist die Demo

Moderne Art:

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

1. .appendist der Ersatz für .appendChild. Der Hauptunterschied besteht darin, dass mehrere Knoten gleichzeitig und sogar einfache Zeichenfolgen akzeptiert werden.append('hello!')
2. oldParent.childNodesist iterierbar, so dass es mit ...mehreren Parametern von verbreitet werden kann.append()

Kompatibilitätstabellen von beiden (kurz: 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

Diese Antwort funktioniert nur dann wirklich, wenn Sie nichts anderes tun müssen, als den inneren Code (innerHTML) von einem zum anderen zu übertragen:

// 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 = '';

Hoffe das hilft!

Wenn Sie -die Namen der ID nicht verwenden , können Sie dies tun

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>