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