如何简便克隆Document Fragment且保留原片段不受影响？

你完全不需要手动遍历子节点再逐个克隆，DocumentFragment继承自Node接口，自带cloneNode()方法，直接调用就能实现完整克隆：

// 直接克隆整个DocumentFragment，true表示深度克隆所有子节点及状态
const clonedFrag = dFrag.cloneNode(true);

这个方法会完整保留原片段的所有节点结构、属性以及事件绑定等状态，比你手动处理的方式更简洁高效。

另外你的原代码存在局限性：cloneNode()不传参数时是浅克隆（仅克隆节点本身，不包含子节点），后续手动设置innerHTML虽然能复制内容，但会丢失节点的事件绑定、自定义属性等状态信息，而深度克隆cloneNode(true)可以完美规避这个问题。

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