innerHTML 仅插入 [object HTMLDivElement]

Question

我想将 html 片段插入另一个 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，我做错了什么？

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

谢谢 ;)

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

innerHTML inserts only [object HTMLDivElement]