JavaScript 更改 DIV 顺序

在编写 Web 页面时，我们常常需要修改元素的顺序，以实现样式的布局与呈现。在 JavaScript 中，我们可以通过 parentNode.insertBefore(newNode, referenceNode) 方法实现元素的插入和移动来实现更改 DIV 顺序的需求。

以下是一个示例，展示如何使用 JavaScript 将 DOM 中的 DIV 的顺序进行更改：

// 获取需要调整顺序的 DIV 元素
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

// 调整 DIV 的顺序
div2.parentNode.insertBefore(div1, div2);  // 将 div1 移到 div2 的前面
div3.parentNode.insertBefore(div2, div3);  // 将 div2 移到 div3 的前面

以上代码将使原本顺序为 div1 -> div2 -> div3 的 DIV 元素变为 div3 -> div2 -> div1 的顺序。

需要注意的是，insertBefore 方法的第一个参数是需要插入到某个元素之前的元素，第二个参数则是目标位置的参照元素。

此外，一旦某个元素被移动，它会被从原来的位置上移除，然后重新插入到目标位置。为此，我们需要特别注意避免出现意料之外的行为，例如出现重复的元素等问题。

综上，使用 JavaScript 更改 DIV 顺序是一个常见的需求，使用 insertBefore 方法可以方便地实现。然而需要注意代码的正确性和健壮性，以避免出现意外的情况。