Как переместить все дочерние элементы 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>

Ответы

Ответ 1

DEMO

В принципе, вы хотите перебрать каждый прямой потомк старого родителя node и перенести его в новый родитель. Любые дети прямого потомка будут перемещаться вместе с ним.

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

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

Ответ 2

Здесь простая функция:

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

Вот демо

Ответ 3

Этот ответ действительно работает, если вам не нужно ничего делать, кроме как передать внутренний код (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 = '';

Надеюсь, это поможет!

Ответ 4

Если вы не используете - в именах идентификаторов, то вы можете сделать это

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>

Ответ 5

Современный способ:

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

.append является заменой .appendChild. Основное отличие состоит в том, что он принимает несколько узлов одновременно и даже простые строки, например .append('hello!')
oldParent.childNodes является итеративным, поэтому его можно распространять с помощью ... чтобы стать несколькими параметрами .append()