Як перенести всі дочірні елементи HTML до іншого батька за допомогою JavaScript?

Уявіть:

<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, їх також потрібно буде перенести як є.

РЕДАГУВАТИ

Щоб бути зрозумілим, я хочу закінчити з:

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

Сподіваюся, це допомагає!

Якщо ви не використовуєте -імена ідентифікаторів, ви можете це зробити

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>