如何提取HTML内容插入DIV？解决返回[object HTMLDivElement]错误

你直接把DOM元素对象赋值给了innerHTML，但innerHTML接收的是HTML字符串，当你给它赋值一个DOM对象时，JS会自动调用对象的toString()方法，结果就是[object HTMLDivElement]。

有两种常用的处理方式：

方式一：获取目标元素的HTML内容再赋值 #

如果你只是想把div[data-v="1"]里的内容复制到data-tail容器中，直接取目标元素的innerHTML即可：

this.inner = document.querySelector('div[data-v="1"]')
this.tail = document.querySelector('[data-tail]')
this.tail.innerHTML = this.inner.innerHTML

方式二：直接移动/克隆DOM元素（更适合保留元素结构与事件） #

如果需要保留原元素的DOM结构、绑定的事件等，不要用innerHTML，而是用DOM操作方法：

• 直接移动原元素：

this.inner = document.querySelector('div[data-v="1"]')
this.tail = document.querySelector('[data-tail]')
this.tail.appendChild(this.inner)

• 克隆元素（保留原元素不动）：

this.inner = document.querySelector('div[data-v="1"]')
this.tail = document.querySelector('[data-tail]')
// true表示深度克隆，包含子元素和事件
const clonedEl = this.inner.cloneNode(true)
this.tail.appendChild(clonedEl)

内容的提问来源于stack exchange，提问作者MathAdams