innerHTML僅插入[object 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;

但是它不起作用，它只能插入[object HTMLDivElement]，如果我在控制台中看到正確的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);