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

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

现代方式：

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

1. .append是.appendChild的替代品，主要区别在于它一次接受多个节点，甚至接受普通字符串，如.append('hello!')
2. oldParent.childNodes是 * 可迭代的 *，因此它可以与...一起展开，以变成.append()的多个参数
   除了IE浏览器，其他浏览器都支持它。

下面是一个简单的函数：

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

**一个

这是一个简单的解决方案-切换节点id并改变它们的顺序。如果你不在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>

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

希望这有帮助！