Clash Royale CLAN TAG#URR8PPP

innerHTML inserts only [object HTMLDivElement]

i want to insert a htmlsnippet into another html-element

i tried it this way

the html

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


the js

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


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?

and yeah i dont want to use the $ libary ;)

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

thanks ;)

3 Answers
3

innerHTML doesn't insert DOM nodes, just strings.

Use appendChild instead

innerHTML

appendChild

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

box2.appendChild( box1 );


You should use the appendChild method.

box2.appendChild(box1);


This should work:

box2.appendChild(box1);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.