Как переместить все дочерние элементы HTML в другой родитель с помощью JavaScript?

представьте себе:

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

какой JavaScript можно написать, чтобы переместить все дочерние узлы (как элементы, так и текстовые узлы) из old-parent to 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>
52
dom-manipulation html javascript

3 ответов

демо

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

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

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

вот простая функция:

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

вот демо

9

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

надеюсь, что это помогает!

-1