innerHTML仅插入[object HTMLDivElement] [英] innerHTML inserts only [object HTMLDivElement]

问题描述

我想将html代码片段插入另一个html元素

i want to insert a htmlsnippet into another html-element

我是这样尝试的

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，我在做什么错了?

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?

是的，我不想使用$ libary;)

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

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

谢谢;)

推荐答案

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

innerHTML doesn't insert DOM nodes, just strings.
Use appendChild instead

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

box2.appendChild( box1 );

这篇关于innerHTML仅插入[object HTMLDivElement]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！