如何通过JavaScript实现点击按钮交换两个div及其子元素位置

原有代码问题 #

你之前写的逻辑仅尝试读写div元素的value属性，但div元素本身不存在原生value属性，且逻辑完全没有操作DOM节点，自然无法实现两个容器及内部内容整体互换的效果。

正确实现逻辑 #

直接通过原生DOM节点操作完成两个元素的位置互换，不需要手动复制子元素、属性或HTML内容，元素绑定的事件、所有子节点、自定义属性都会随节点整体移动，无内容丢失风险，性能优于innerHTML替换方案。

修正后的JavaScript代码 #

function switchTokens() {
  // 获取两个待交换的容器节点
  const fromTokenEl = document.getElementById('from_token_select');
  const toTokenEl = document.getElementById('to_token_select');

  // 创建临时占位节点标记原始位置
  const tempNode = document.createComment('swap-placeholder');
  fromTokenEl.parentNode.insertBefore(tempNode, fromTokenEl);
  // 移动两个节点完成位置互换
  fromTokenEl.parentNode.insertBefore(fromTokenEl, toTokenEl);
  toTokenEl.parentNode.insertBefore(toTokenEl, tempNode);
  // 清理临时占位节点
  tempNode.remove();
}

HTML代码修正说明 #

原有代码中第二个img标签的src属性值未加引号，不符合HTML规范，修正后完整HTML如下：

<div class="token_select" id="from_token_select">
  <img src="https://image-placeholder.com/images/actual-size/75x100.png" class="token_image" id="from_token_img" />
  <span id="from_token_text">from_token_text</span>
</div>

<button onClick="switchTokens()" id="swap_token_address" class="fa-solid fa-arrows-up-down">switchTokens Btn</button>

<div class="token_select" id="to_token_select">
  <img src="https://image-placeholder.com/images/actual-size/88x31.png" class="token_image" id="to_token_img" />
  <span id="to_token_text">to_token_text</span>
</div>

补充说明 #

如果业务上需要同步两个容器关联的表单值、状态数据，只需要在节点交换逻辑执行完成后，追加对应的数据同步代码即可，上述节点交换逻辑已经可以实现两个div从视觉到DOM结构的100%位置互换。

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