如何用原生Vanilla JS将点击的已创建div节点从原div移至目标div

核心调整说明 #

• 原有逻辑是点击新建div直接从output1移除，调整后会在点击时把节点迁移到第二个独立容器，全程不需要引入jQuery，所有逻辑用原生DOM API实现。
• 利用原生appendChild的特性简化代码：当向容器传入已挂载在DOM上的节点时，方法会自动将节点从原父节点摘除再挂载到新容器，无需手动编写removeChild逻辑。
• 优化原有代码的内存开销：将事件处理函数从闭包内部提升到全局作用域，避免每次创建新节点都生成独立的函数实例。

完整可运行代码 #

HTML 结构 #

补充目标容器output2，原有结构逻辑不变：

<button id="add_item_button">add item</button>
<!-- 原节点挂载容器 output1 -->
<div id="output"></div>
<!-- 节点迁移目标容器 output2 -->
<div id="output2"></div>

CSS 样式 #

在原有基础上补充容器边界和鼠标手型提示，方便直观查看迁移效果：

#output, #output2 {
  min-height: 60px;
  margin: 10px 0;
  border: 1px dashed #ccc;
  padding: 5px;
}
.added_div {
  background-color: #000;
  margin: 5px;
  height: 50px;
  width: 50px;
  display: inline-block;
  cursor: pointer;
}

JS 逻辑 #

替换原有事件处理逻辑，实现节点迁移：

// 初始化获取所有关联DOM元素
const addItemBtn = document.getElementById('add_item_button');
const output1 = document.getElementById('output');
const output2 = document.getElementById('output2');

// 绑定新增按钮的点击事件
addItemBtn.addEventListener('click', createNewItem);

// 新建节点的逻辑
function createNewItem() {
  const newDiv = document.createElement('div');
  newDiv.classList.add('added_div');
  // 给节点绑定点击迁移的事件
  newDiv.addEventListener('click', moveToTargetContainer);
  // 将新节点追加到初始容器output1
  output1.appendChild(newDiv);
}

// 节点点击后的迁移处理
function moveToTargetContainer(e) {
  // 直接将触发事件的节点追加到output2即可
  output2.appendChild(e.target);
}

补充说明 #

• 如果后续需要实现反向迁移（点击output2里的节点再挪回output1），只需要在迁移判断时读取当前节点的父节点，根据父节点判断要追加到哪个容器即可，不需要额外维护节点状态。
• 原有代码中闭包绑定事件的写法本身功能是可用的，只是在创建大量节点时会产生不必要的内存占用，优化后的写法在节点数量较多时性能表现更好。

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