如何仅追加DOM节点的子节点且不丢失原有事件监听器

要仅追加outer的内部子节点，同时完整保留子节点上的事件监听器、自定义属性、表单状态等关联数据，核心是直接操作DOM节点引用，绝对不能用innerHTML这类会序列化重建节点的方案——序列化过程会丢失所有非HTML标准的节点关联数据。

简洁实现（现代浏览器环境） #

直接利用Node.append()支持多参数的特性，配合展开运算符一次性传入所有子节点即可：

const body = document.querySelector('body');
// 移动所有子节点（包含元素、文本、注释节点）
body.append(...outer.childNodes);

// 如果只需要移动标签元素节点，忽略空白文本、注释等节点，换成children即可
// body.append(...outer.children);

兼容实现（全环境支持） #

如果需要兼容不支持展开运算符的老旧环境，可以用循环逐次移动节点，这个写法没有任何兼容问题：

const body = document.querySelector('body');
// 只要outer内部还有子节点，就把第一个子节点移动到body下
while (outer.firstChild) {
  body.append(outer.firstChild);
}

原理说明 #

根据DOM规范，当你将一个已存在的DOM节点追加到其他父节点下时，浏览器不会复制或重建节点，而是直接将节点从原父节点的子节点列表中移除，挂载到新父节点下。整个过程节点的引用没有发生变化，因此绑定的事件监听器、挂载的自定义数据、节点状态都会完整保留。

❌ 避坑提醒：不要使用body.innerHTML += outer.innerHTML这类字符串拼接的写法。这种方式会先将目标容器内的现有DOM序列化为HTML字符串，拼接后重新解析为全新的DOM节点，不仅outer的子节点会丢失所有关联数据，目标容器内原有节点的事件、状态也会全部被清空，还存在XSS注入风险。

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