DOM元素被append到其他节点时原位置消失的原因及解决办法

DOM 规范中，同一个元素节点在文档树内仅能存在于一个位置。你调用append()方法插入已经存在于DOM树中的点击节点时，浏览器会自动先将该节点从原父级节点中移除，再追加到目标.append节点下，因此原红色区域内的对应元素会消失。

只需要在追加前对点击的节点进行克隆即可，使用Node.cloneNode()方法，传入参数true表示执行深克隆，会同步克隆节点的所有子节点、属性：

document.querySelectorAll('.image').forEach(el => {
 el.querySelector('span').addEventListener('click', (e) => {
   // 深克隆点击的节点
   const clonedElement = e.target.cloneNode(true);
   document.querySelector('.append').append(clonedElement);
 });
});

注意：cloneNode(true)不会克隆通过addEventListener绑定的事件，如果需要克隆后的元素也保留相同的点击行为，可以改用事件委托的方式绑定事件，或者克隆后手动给新节点重新绑定对应事件。

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