在html中使用js动态交换两个元素的位置

1024小神2025-11-26 17:33

大家好，我的开源项目PakePlus可以将网页/Vue/React项目打包为桌面/手机应用并且小于5M只需几分钟，官网地址：pakeplus.com

DOM操作交换

使用 insertBefore 或 replaceChild 方法直接操作DOM元素

javascript 复制代码

function swapElementsDOM() {
  const container = document.getElementById('elementsContainer');
  const element1 = document.getElementById('element1');
  const element2 = document.getElementById('element2');

  if (element1.nextElementSibling === element2) {
    container.insertBefore(element2, element1);
  } else {
    container.insertBefore(element1, element2);
  }
}

CSS类切换交换

通过切换CSS类来改变元素的显示顺序（使用flex-direction或order属性）

javascript 复制代码

function swapElementsCSS() {
  const container = document.getElementById('elementsContainer');
  container.classList.toggle('reversed');
}

/* CSS部分 */
.reversed {
  flex-direction: column-reverse;
}

动画交换

使用CSS过渡或动画实现平滑的位置交换效果

javascript 复制代码

function swapElementsAnimated() {
  const element1 = document.getElementById('element1');
  const element2 = document.getElementById('element2');

  // 添加动画类
  element1.classList.add('swapping');
  element2.classList.add('swapping');

  setTimeout(() => {
    // 实际交换位置
    const container = document.getElementById('elementsContainer');
    if (element1.nextElementSibling === element2) {
      container.insertBefore(element2, element1);
    } else {
      container.insertBefore(element1, element2);
    }

    // 移除动画类
    element1.classList.remove('swapping');
    element2.classList.remove('swapping');
  }, 300);
}

大家好，我是1024小神，技术群 / 私活群 / 股票群或交朋友都可以私信我。如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~