如何使用Javascript/CSS交换两个HTML元素的位置

仅通过原生CSS或原生JS都可以实现HTML元素的位置交换，以下是针对你给出的DOM结构的具体实现方案：

最推荐使用Flex布局的order属性实现，代码量最小，无需修改DOM结构：

.container {
  display: flex;
  flex-direction: column;
}
.div1 {
  order: 3;
}
.div2 {
  order: 2;
}
.div3 {
  order: 1;
}

注意：该方案仅修改视觉渲染顺序，DOM节点本身的顺序不会变化，屏幕阅读器等辅助设备仍会按照原DOM顺序读取内容。如果你的测试需要统计元素点击、考虑无障碍适配，更建议使用JS方案。

该方案会直接修改DOM节点的实际顺序，适配所有布局场景，无障碍兼容性更好，通用写法不限制容器内其他元素数量：

const container = document.querySelector('.container');
const div1 = document.querySelector('.div1');
const div3 = document.querySelector('.div3');
// 临时占位节点用于标记原有位置
const tempAnchor = document.createTextNode('');
div1.before(tempAnchor);
// 交换两个节点位置
div3.before(div1);
tempAnchor.before(div3);
// 移除临时占位节点
tempAnchor.remove();

如果你的容器内只有这三个子元素，还可以用更简洁的写法直接调整子元素顺序：

const container = document.querySelector('.container');
const [div1, div2, div3] = container.children;
container.append(div3, div2, div1);

两种方案都可以直接写入GTM的「自定义HTML」标签中，设置触发规则为页面加载完成后触发即可，无需修改原站点代码：

• 仅需要视觉调整顺序的场景优先用CSS方案，性能开销更低
• 需要调整DOM实际顺序、适配点击统计/无障碍场景优先用JS方案

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