实现点击切换.item元素在.region1与.region2间移动的功能

当然可以实现这个切换功能！先提个小细节：你给出的HTML里<a>标签的闭合标签写错了，应该是</a>而不是</div>，我会在代码里修正这个问题。

下面给你两种常用的实现方案，你可以根据项目情况选择：

这种方案不需要依赖任何库，纯原生代码就能搞定：

首先是修正后的HTML结构：

<a href="#" class="btn">Click</a>
<div class="region1">
  <div class="item">我是需要移动的元素</div>
</div>
<div class="region2"></div>

然后是JavaScript逻辑：

// 获取页面上的关键元素
const toggleBtn = document.querySelector('.btn');
const targetItem = document.querySelector('.item');
const region1 = document.querySelector('.region1');
const region2 = document.querySelector('.region2');

// 给按钮绑定点击事件
toggleBtn.addEventListener('click', function(e) {
  // 阻止a标签默认的跳转行为，避免页面跳到顶部
  e.preventDefault();
  
  // 判断元素当前所在的区域，然后切换位置
  if (targetItem.parentNode === region1) {
    region2.appendChild(targetItem);
  } else {
    region1.appendChild(targetItem);
  }
});

原理说明 #

appendChild()方法如果操作的是已经存在于DOM中的元素，会直接把它从原位置移除，再添加到新的父容器里，所以不需要额外写删除元素的代码，非常方便。

如果你的项目已经引入了jQuery，代码会更简洁：

同样使用修正后的HTML，JavaScript部分如下：

$('.btn').on('click', function(e) {
  // 阻止默认跳转行为
  e.preventDefault();
  
  const $item = $('.item');
  // 根据当前父容器的类名判断切换方向
  if ($item.parent().hasClass('region1')) {
    $item.appendTo('.region2');
  } else {
    $item.appendTo('.region1');
  }
});

原理说明 #

jQuery的appendTo()方法和原生的appendChild()逻辑类似，会自动移动已存在的DOM元素，parent()和hasClass()则帮我们快速判断元素当前的位置。

如果你的场景中有多个.item元素，只需要稍微调整选择器和循环逻辑就能适配，但根据你给出的代码结构，上面的方案完全满足单个元素的切换需求。

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