Javascript从一个div获取子元素并将元素数据转换为另一个div

Question

我有一个名为“out”的框和一个名为“deposit”的框。我所要做的就是使用onclick命令将“out”框中的任何子元素转移到“deposit”框中。

<div id="out"> 
<span>qwe</span> 
<h1>asd</h1> 
<img src="img/globe.png"/> 
<img src="img/sdf.jpg" /> 
<b>test</b> 
</div> 

<div id="deposit"></div> 

<script type="text/javascript"> 

document.getElementById('out').onclick = function() { 

document.getElementById('deposit').innerHTML=document.getElementById('out').getElementsByTagName('*').innerHTML; 

} 

</script> 

我把问题归结为它与“getElementsByTagName”问题有关。 Getchildnodes，孩子，和这getelementsbytagname让我感到困惑。我所要做的只是简单地点击“出”框中的任何元素，然后将所选元素转移到“存款”框中。

[否jQuery，请，我需要解决这个正规途径。]

Answer 1

更换

document.getElementById('deposit').innerHTML=document.getElementById('out').getElementsByTagName('*').innerHTML;

与

var a = document.getElementById('out'); 

for (var i = 0; i < a.childNodes.length; i++) { 
    a.childNodes[i].onclick = function() { 

     var b = document.getElementById('deposit'); 
     b.innerHTML = b.innerHTML + this.outerHTML; 

    } 
} 

DEMO