如何将DOM元素转为HTML字符串插入.root标签解决[object HTMLDivElement]异常

开发者阿泽

2026-11-7

问题出在哪

innerHTML只接受字符串格式的HTML代码，你传一个DOM节点对象进去，JS会自动把对象转成字符串，DOM对象的默认转字符串结果就是[object HTMLDivElement]，根本不是你想要的HTML结构。
你现在的代码逻辑本身就有问题：每次读.root的内容、克隆完再塞回同一个.root，哪怕类型对了，节点也会无限套娃嵌套，几轮下来浏览器内存就占满了，完全达不到你要的效果。

怎么改

两种常用写法，按需求选：

直接操作DOM节点（推荐，性能更好）
不要硬往innerHTML里塞节点对象，用原生提供的节点操作方法，这类方法天生支持接收DOM节点作为参数：

setInterval(function() {
    const target = document.querySelector('.root');
    // 克隆的目标换成你真正要取内容的源节点，别克隆.root自己
    const sourceNode = document.querySelector('.你要取内容的节点选择器');
    const clonedNode = sourceNode.cloneNode(true);
    // 清空target原有内容，把克隆的节点加进去
    target.replaceChildren(clonedNode);
}, 1);

如果你坚持要给innerHTML赋值
那就把克隆的节点转成HTML字符串再赋值，取节点的outerHTML属性就行：

setInterval(function() {
    const target = document.querySelector('.root');
    const sourceNode = document.querySelector('.你要取内容的节点选择器');
    const clonedNode = sourceNode.cloneNode(true);
    // 提取节点对应的HTML字符串再赋值
    target.innerHTML = clonedNode.outerHTML;
}, 1);