为什么JavaScript中cloneNode放点击事件外仅首次追加克隆元素生效

核心是DOM节点属于引用类型，结合append()方法的特性共同导致该现象：

• 第一段可正常多次添加元素的写法，把cloneNode(true)放在点击事件回调内部：每次触发点击事件都会执行一次克隆逻辑，每次都会生成一个全新的独立DOM节点对象，所以每次调用append()插入的都是不同的新节点，自然可以重复添加多个元素。
• 第二段只能添加一次的写法，把cloneNode(true)放在事件回调外部：代码初始化阶段只会执行一次克隆操作，全局仅存在唯一一个克隆出来的DOM节点对象。而append()方法插入已经存在于当前文档树中的DOM节点时，不会自动复制该节点，只会将该节点从原有位置移动到新的插入位置。所以第一次点击是把节点插入目标容器，后续的点击操作本质都是在移动同一个已存在的节点，最终看起来就像只添加了一次。

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