如何使用insertAdjacentElement克隆DOM元素而非剪切粘贴？

你说得没错，insertAdjacentElement本身确实是做元素的「移动」操作——把元素从原有位置剪切到新位置，而不是复制。要实现克隆插入，关键是先把目标元素克隆一份，再把克隆体传给这个方法即可。

具体步骤 #

• 首先获取需要克隆的原始元素
• 使用cloneNode()方法创建元素的克隆体（注意参数决定是否克隆子元素）
• 将克隆体传入insertAdjacentElement完成插入

修改后的代码示例 #

// 获取原始元素
const originalMenu = document.getElementById('main_0_columnb_0_PanelMenu');
// 深克隆元素（参数true表示同时克隆所有子元素和属性，false仅克隆当前元素本身）
const clonedMenu = originalMenu.cloneNode(true);
// 将克隆体插入到目标位置
document.getElementById('subNav').insertAdjacentElement('afterbegin', clonedMenu);

额外注意点 #

• cloneNode(true)会克隆元素的所有子节点、属性，但不会克隆通过addEventListener绑定的事件监听器（内联事件如onclick="xxx"会被克隆）。如果需要保留这类事件，你需要手动重新绑定，或者改用事件委托的方式处理。
• 如果只需要克隆元素本身（不包含子元素），把cloneNode的参数改成false即可。

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