innerHTML的只是插入[对象HTMLDivElement]

Question

我要插入htmlsnippet到其它HTML元素

我尝试了这样

在html

<div class="box1"> 
    insert this html element 
</div> 
<div class="box2"> 
    into this 
</div> 

js的

var box1 = document.querySelectorAll(".box1")[0]; 
var box2 = document.querySelectorAll(".box2")[0]; 
console.log(box1); 
box2.innerHTML = box1; 

但它不工作它只插入[对象HTMLDivElement]，如果我看着它放在控制台ou t正确的html，我做错了什么？

和是我不想使用$ libary;）

http://codepen.io/destroy90210/pen/MKQOwy

感谢;）

Answer 1

innerHTML不插入DOM节点，只是字符串。
使用appendChild代替

var box1 = document.querySelector(".box1"); 
var box2 = document.querySelector(".box2"); 

box2.appendChild(box1); 

Answer 2

您应该使用appendChild方法。

box2.appendChild(box1); 

Answer 3

这应该工作：

box2.appendChild(box1);