如何使用JavaScript将所有HTML元素子级移动到另一个父级?

想像:

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

可以编写什么JavaScript将所有子节点(元素和文本节点)从Hello World迁移到2559381188444161010,而无需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>
Drew Noakes asked 2019-10-07T22:52:22Z
3个解决方案
85 votes

DEMO

基本上,您想遍历旧父节点的每个直接后代,并将其移到新父节点。 直接后代的任何子代都将随之移动。

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

while (oldParent.childNodes.length > 0) {
    newParent.appendChild(oldParent.childNodes[0]);
}
crush answered 2019-10-07T22:52:35Z
9 votes

这是一个简单的函数:

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

elel是要移动的元素,newParentel是要移动的元素,因此您将执行以下功能:

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

这是演示

Cilan answered 2019-10-07T22:53:14Z
0 votes

仅当您除了将内部代码(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 = '';

希望这可以帮助!

ItsJonQ answered 2019-10-07T22:53:40Z
translate from https://stackoverflow.com:/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript