innerHTML inserts only [object HTMLDivElement]
<p>i want to insert a htmlsnippet into another html-element </p>

<p>i tried it this way</p>

<p>the html</p>

<pre><code>&lt;div class="box1"&gt;
    insert this html element
&lt;/div&gt;
&lt;div class="box2"&gt;
  into this
&lt;/div&gt;
</code></pre>

<p>the js</p>

<pre><code>var box1 = document.querySelectorAll(".box1")[0]; 
var box2 = document.querySelectorAll(".box2")[0];
console.log(box1);
box2.innerHTML = box1;
</code></pre>

<p>but it doesnt work it only insert [object HTMLDivElement], if i look at the console it puts out the correct html, what im doing it wrong?</p>

<p>and yeah i dont want to use the $ libary ;) </p>

<p><a href="http://codepen.io/destroy90210/pen/MKQOwy" rel="noreferrer">http://codepen.io/destroy90210/pen/MKQOwy</a></p>

<p>thanks ;)</p>