innerHTML 仅插入 [object HTMLDivElement]

Posted 2023-05-07

【中文标题】innerHTML 仅插入 [object HTMLDivElement]

【英文标题】：innerHTML inserts only [object HTMLDivElement]

【发布时间】：2016-04-30 04:07:59

【问题描述】：

我想在另一个 html 元素中插入一个 htmlsn-p

我试过这样

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

是的，我不想使用 $ 库；）

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

谢谢 ;)

【参考方案1】：

innerHTML 不插入 DOM 节点，只插入字符串。 请改用appendChild

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

box2.appendChild( box1 );

【参考方案2】：

您应该使用appendChild 方法。

box2.appendChild(box1);

【参考方案3】：

这应该可行：

box2.appendChild(box1);