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

Question

想象一下：

<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>

Answer 1

这是一个简单的函数：

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

Here is the Demo

Answer 2

这个答案只有在你不需要做任何事情的时候才真正有效，除了将内部代码（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 3

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

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

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

#old-parent {
  background-color: red;
}

#new-parent {
  background-color: green;
}

<div id="old-parent">
  <span>Foo</span>
  <b>Bar</b> Hello World
</div>
<div id="new-parent"></div>
<br>
<button onclick="move()" id="button">Move childs</button>

External link

Answer 4

如果你没有在 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>

Answer 5

现代方式：

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

1. .append 是 .appendChild 的替代品。主要区别在于它一次接受多个节点，甚至是纯字符串，比如.append('hello!')
2. oldParent.childNodes 是 iterable 所以它可以和... 一起传播成为.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