JavaScript/重构 DOM
除了添加和删除节点外，树上常见的活动是重新排列节点或子树。在之前的一些示例中，我们已经看到 appendChild 将节点插入到父节点的最后一个子节点中。当然，这不是局限于当前创建的子节点。对于现有节点，也可以执行相同的操作。因此，它是执行重新排列的适当函数。
我们使用以下示例 HTML 页面来演示各种可能性。
<!DOCTYPE html>
<html>
<head>
<script>
function show() {
"use strict";
// ...
}
</script>
</head>
<body id="body" style="margin:2em">
<h1>The magic manipulator</h1>
<button id="buttonShow" onclick="show()" style="margin:1em 0em 1em 0em">Start</button>
<div id="div_1">Our sweet products
<ul id="ul_1">
<li id="li_11">Ice creme</li>
<li id="li_12">Chocolate</li>
<li id="li_13">Coffee</li>
</ul>
</div>
<div id="div_2">Additional offers
<ul id="ul_2">
<li id="li_21">Creme</li>
<li id="li_22">Sugar</li>
<li id="li_23">Cakes</li>
</ul>
</div>
</body>
</html>
我们识别两个元素并将它们移动到另一个节点的末尾。这个其他节点不一定是原来的父节点。但是移动后，它就成为新的父节点。
function show() {
"use strict";
// select the first <ul> as the new parent
const ul_1 = document.getElementById("ul_1");
// select two <li> elements to get moved
const li_11 = document.getElementById("li_11");
const li_23 = document.getElementById("li_23"); // The 'cakes'
// move the two children
ul_1.appendChild(li_11);
ul_1.appendChild(li_23);
}
如您所见，“冰淇淋”被移动到其产品组的末尾（暂时）。之后，“蛋糕”是第二个产品组的子节点，被移动到第一个产品组的末尾。
您可以将元素移动到一组兄弟节点中的任何位置。（“兄弟节点”是具有相同父节点的节点。）首先，您必须找到父节点。接下来，您找到子节点，该子节点将成为元素的新后继节点。当这两个节点都已知时，函数 insertBefore 将元素插入到此位置。
例如，我们将“蛋糕”移动到第一个产品组的第一位。
function show() {
"use strict";
// select the first <ul> element; it acts as the parent
const ul_1 = document.getElementById("ul_1");
// select the first li element; we need it for positioning
const li_11 = document.getElementById("li_11");
// select 'Cakes' li element
const li_23 = document.getElementById("li_23");
// move the 'Cakes' to the first place of the first product group
ul_1.insertBefore(li_23, li_11);
}
这里，“蛋糕”成为第一个产品组的第一个元素。使用相同的命令，您可以将它们移动到兄弟节点序列中的任何位置。只需找到将成为其新后继节点的兄弟节点，而不是“li_11”。
元素中的属性顺序与属性顺序无关。因此，不需要也不需要重新排列它们。当 DOM 被序列化时，程序可能以不同的方式进行（原始顺序、按字母顺序等）。