js点击实现元素互换
实现元素互换的 JavaScript 方法
方法一：通过交换 DOM 节点位置
使用 insertBefore 或 insertAdjacentElement 方法直接交换两个元素在 DOM 中的位置：
function swapElements(element1, element2) {
const parent1 = element1.parentNode;
const parent2 = element2.parentNode;
const next1 = element1.nextSibling;
const next2 = element2.nextSibling;
parent1.insertBefore(element2, next1);
parent2.insertBefore(element1, next2);
}方法二：通过临时克隆节点交换
创建一个临时克隆节点辅助交换：
function swapWithClone(element1, element2) {
const temp = document.createElement('div');
element1.parentNode.insertBefore(temp, element1);
element2.parentNode.insertBefore(element1, element2);
temp.parentNode.insertBefore(element2, temp);
temp.remove();
}方法三：交换 HTML 内容
如果只需要交换内容而非节点本身：
function swapContent(element1, element2) {
const temp = element1.innerHTML;
element1.innerHTML = element2.innerHTML;
element2.innerHTML = temp;
}方法四：CSS 视觉交换
通过修改样式实现视觉交换（实际 DOM 结构不变）：
function swapVisual(element1, element2) {
const rect1 = element1.getBoundingClientRect();
const rect2 = element2.getBoundingClientRect();
element1.style.position = 'absolute';
element2.style.position = 'absolute';
element1.style.left = `${rect2.left}px`;
element1.style.top = `${rect2.top}px`;
element2.style.left = `${rect1.left}px`;
element2.style.top = `${rect1.top}px`;
}点击事件绑定示例
为多个元素添加点击交换功能：
document.querySelectorAll('.swap-item').forEach(item => {
item.addEventListener('click', function() {
const target = document.querySelector(this.dataset.swapTarget);
if (target) swapElements(this, target);
});
});HTML 结构示例：
<div class="swap-item" data-swap-target="#item2">Item 1</div>
<div id="item2" class="swap-item" data-swap-target="#item1">Item 2</div>注意事项
- 方法一和方法二会实际改变 DOM 结构，可能影响事件监听器
- 方法四的绝对定位可能影响页面布局
- 如果元素尺寸不同，交换后可能需要额外调整样式
- 对于动态生成的元素，建议使用事件委托绑定点击事件
