Question

想象：

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

在没有jQuery的情况下，可以编写哪些JavaScript来将所有子节点（包括元素和文本节点）从old-parent移动到new-parent？

我不关心节点之间的空白，虽然我希望能够捕获流浪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>

Answer 1

DEMO

基本上，您希望循环遍历旧父节点的每个直接后代，并将其移动到新父节点。任何直系后代的孩子都会被它带走。

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

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

Answer 2

这是一个简单的功能：

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

el的{{1}}是要移动的元素， childNodes是要移动到的元素newParent， 所以你要执行像：

这样的功能

el

<强> Here is the Demo

Answer 3

现代方式：

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

.append替代.appendChild。主要区别在于它一次接受多个节点，甚至接受纯字符串，例如.append('hello!')
oldParent.childNodes是可迭代的，因此可以与...一起传播，成为.append()

两者的兼容性表（简而言之：Edge 17 +，Safari 10 +）：

Answer 4

除了将内部代码（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 = '';

希望这有帮助！

Answer 5

如果您未在ID的名称中使用-，则可以这样做

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>

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

5 个答案: