如何将所有的HTML元素的孩子使用JavaScript的另一个家长？

想像：

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

可以编写什么JavaScript来将所有子节点（包括元素和文本节点）从old-parent到没有jQuery的new-parent ？

我不关心节点之间的空白，虽然我希望能够赶上stream浪的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：

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

el的childNodes是要移动的元素， newParent是要移动到的元素，所以你可以执行如下的函数：

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

这是演示

Answer 3

这个答案只有在你不需要做任何事情而不是将内部代码（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 = ''; 

希望这可以帮助！