如何使用普通JavaScript将元素从DOM中的一个位置移动到另一个位置？

Question

我知道如何做到这一点jQuery的（未经测试，但应工作）：

$('#foo').html().appendTo('#bar'); 
$('#foo').remove(); 

但如何以纯JS做到这一点？

Answer 1

​​3210

这是一个解决方案，您也可以搜索clonenode。

Answer 2

jQuery代码可以这样做在普通的JavaScript：

var foo = document.getElementById("foo"), 
    bar = document.getElementById("bar"); 
bar.innerHTML = foo.innerHTML; 
foo.parentNode.removeChild(foo); 

但是，这只是份内foo的HTML代码bar作为一个字符串，然后从DOM删除foo。

移动节点也是可以的，就像这样：

var foo = document.getElementById("foo"), 
    bar = document.getElementById("bar"); 
bar.innerHTML = ""; 
for (var node in foo.childNodes) { 
    bar.appendChild(node); 
} 
foo.parentNode.removeChild(foo); 

这会的foo实际子节点移动到bar，然后取出现在空foo。

Answer 3

创建元素

<div id="div1"> 
    <p id="p1">This is a paragraph.</p> 
    <p id="p2">This is another paragraph.</p> 
    </div> 

    <script> 
    var para=document.createElement("p"); 
    var node=document.createTextNode("This is new."); 
    para.appendChild(node); 

    var element=document.getElementById("div1"); 
    element.appendChild(para); 
    </script> 

删除元素（你必须知道父）

<div id="div1"> 
    <p id="p1">This is a paragraph.</p> 
    <p id="p2">This is another paragraph.</p> 
    </div> 
    <script> 
    var parent=document.getElementById("div1"); 
     var child=document.getElementById("p1"); 
     parent.removeChild(child); 
    </script> 

通过http://www.w3schools.com/js/js_htmldom_elements.asp

Answer 4

在最简单的为您带来的，有这种可能性：

var foo = document.getElementById('foo'); 
document.getElementById('bar').innerHTML = foo.innerHTML; 
foo.parentNode.removeChild(foo); 

JS Fiddle demo。

而且，使用函数最小化的重复：

function moveTo(source,target){ 
    if (!source || !target) { 
     return false; 
    } 
    else { 
     var children = source.childNodes; 
     while (children.length){ 
      target.appendChild(children[0]); 
     } 
     source.parentNode.removeChild(source); 
    } 
} 

var bar = document.getElementById('bar'), 
    foo = document.getElementById('foo'); 

moveTo(foo, bar); 

JS Fiddle demo。