Jak przenieść wszystkie dzieci elementów HTML do innego rodzica za pomocą JavaScript?

Wyobrażać sobie:

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

Jaki JavaScript można napisać, aby przenieść wszystkie węzły potomne (zarówno elementy, jak i węzły tekstowe) z old-parentdo new-parentbez jQuery?

Nie obchodzą mnie spacje między węzłami, chociaż spodziewam się, że złapię zbłąkane Hello World, musiałyby zostać przeniesione tak, jak są.

EDYTOWAĆ

Żeby było jasne, chcę skończyć z:

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

Odpowiedź na pytanie, z którego jest to proponowany duplikat, skutkowałaby:

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

PRÓBNY

Zasadniczo chcesz przejść przez każdy bezpośredni potomek starego węzła nadrzędnego i przenieść go do nowego węzła nadrzędnego. Wszelkie dzieci bezpośredniego potomka zostaną nim poruszone.

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

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

Nowoczesny sposób:

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

1. .appendjest zamiennikiem .appendChild. Główną różnicą jest to, że akceptuje wiele węzłów jednocześnie, a nawet zwykłe ciągi, takie jak.append('hello!')
2. oldParent.childNodes jest iterowalny, więc można go rozprzestrzeniać, ...aby stać się wieloma parametrami.append()

Tabele kompatybilności obu (w skrócie: 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

Oto prosta funkcja:

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

el„s childNodessą elementy do przeniesienia, newParent jest elementem elzostaną przeniesione, więc można wykonać funkcji takich jak:

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

Oto Demo

Ta odpowiedź naprawdę działa tylko wtedy, gdy nie musisz robić nic innego niż przenoszenie kodu wewnętrznego (innerHTML) z jednego na drugi:

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

Mam nadzieję że to pomoże!

Jeśli nie używasz -w nazwach id, możesz to zrobić

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>