JavaScript 在 DOM 中移动元素

Question

假设我有三个 <div>页面上的元素。如何交换第一个和第三个位置 <div> ？ jQuery 很好。

Answer 1

没有必要为这种琐碎的任务使用库:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first

这考虑到 getElementsByTagName 返回一个实时 NodeList，该 NodeList 会自动更新以反射(reflect) DOM 中元素被操作时的顺序。

您还可以使用:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first

如果您想尝试，还有其他各种可能的排列方式:

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));

例如:-)