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