能否通过JavaScript DOM操作调整HTML结构？互换两个div位置

能不能用JavaScript操作HTML结构？ #

当然可以。JavaScript的DOM（文档对象模型）API专门用于动态操作HTML的结构、内容和样式，包括元素的移动、添加、删除等操作，完全不需要直接修改原始HTML文件。

示例HTML代码 #

<div class="div1"> this needs to go bottom</div>
<div class="div2"> and this needs to go up</div>

实现方法 #

下面提供几种简单的实现方式，都能将div1移到下方、div2移到上方：

方法1：使用insertBefore

利用父元素的insertBefore方法，直接将div2插入到div1的前面：

// 获取目标元素
const div1 = document.querySelector('.div1');
const div2 = document.querySelector('.div2');
// 获取父容器
const parent = div1.parentNode;

// 把div2插入到div1之前
parent.insertBefore(div2, div1);

方法2：使用appendChild

appendChild会将元素从当前位置移除，再添加到父元素的末尾。由于原顺序是div1在前、div2在后，直接将div1追加到父元素末尾就能完成互换：

const div1 = document.querySelector('.div1');
const div2 = document.querySelector('.div2');
const parent = div1.parentNode;

// 将div1移到父元素最后，此时div2自然处于上方
parent.appendChild(div1);

方法3：使用replaceWith（ES6+）

通过临时节点中转，实现两个元素的位置替换：

const div1 = document.querySelector('.div1');
const div2 = document.querySelector('.div2');

// 创建临时文本节点占位
const tempNode = document.createTextNode('');

// 分步替换
div1.replaceWith(tempNode);
div2.replaceWith(div1);
tempNode.replaceWith(div2);

原理说明 #

在DOM操作中，所有元素都是文档树的节点，当你将一个节点插入到新位置时，它会自动从原位置被移除，不需要额外执行删除操作。这也是上述方法能实现位置互换的核心原因。

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