使用appendChild()将变量中的HTML代码添加到页面的正确方法

嘿，这个问题我之前踩过坑！你报错的核心原因很清楚：appendChild()方法只能接收Node类型的参数，但你传入的是一串HTML字符串，浏览器自然不认啦。下面给你几种实用的解决办法，按需挑选就行：

方法一：直接用innerHTML快速插入 #

这是最简单直接的方式，适合快速插入或替换内容：

// 替换目标元素内的所有内容
e.target.innerHTML = htmlCode;

// 追加内容（不覆盖原有内容）
e.target.innerHTML += htmlCode;

⚠️ 注意：如果目标元素里原本有绑定了事件的元素，用innerHTML会重新渲染内容，导致原有事件监听丢失，这点要留意。

方法二：用DOMParser把字符串转成Node节点 #

如果你需要把HTML字符串先转成真正的DOM节点再操作（比如插入后还要修改节点属性），这个方法更规范：

// 创建解析器实例
const parser = new DOMParser();
// 把HTML字符串解析成一个完整的文档对象
const doc = parser.parseFromString(htmlCode, 'text/html');
// 提取我们需要的节点（也就是你字符串里的最外层div）
const newNode = doc.body.firstChild;
// 现在就可以用appendChild插入了
e.target.appendChild(newNode);

这种方式不会影响原有元素的事件监听，而且能精准控制插入的节点，适合复杂场景。

方法三：用insertAdjacentHTML()灵活插入 #

这个方法可以说是兼顾了便捷性和安全性，支持在元素的不同位置插入HTML字符串，还不会破坏原有内容和事件：

// 在目标元素内部的末尾追加（和appendChild效果一致）
e.target.insertAdjacentHTML('beforeend', htmlCode);

// 还有其他可选位置：
// 'beforebegin'：在目标元素的外部前面插入
// 'afterbegin'：在目标元素内部的开头插入
// 'afterend'：在目标元素的外部后面插入

我个人在大多数场景下都会优先用这个方法，既不用转节点，又能灵活控制插入位置，非常省心。

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