DOM中的JavaScript移动元素
假设我在页面上有三个<div>元素。 我如何交换第一个和第三个<div> ？ jQuery很好。
用jQuery平凡无奇
$('#div1').insertAfter('#div3'); $('#div3').insertBefore('#div2');
如果您想重复执行此操作，则需要使用不同的select器，因为div在移动时会保留它们的ID。
$(function() { setInterval( function() { $('div:first').insertAfter($('div').eq(2)); $('div').eq(1).insertBefore('div:first'); }, 3000 ); });
没有必要使用一个图书馆这样一个微不足道的任务：
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, third
这考虑到getElementsByTagName返回一个活动的NodeList，它被自动更新以反映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, third
还有其他各种可能的排列方式，如果你想尝试一下：
divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));
例如 ：-）
jQuery.fn.swap = function(b){ b = jQuery(b)[0]; var a = this[0]; var t = a.parentNode.insertBefore(document.createTextNode(''), a); b.parentNode.insertBefore(a, b); t.parentNode.insertBefore(b, t); t.parentNode.removeChild(t); return this; };
并像这样使用它：
$('#div1').swap('#div2');
如果你不想使用jQuery，你可以很容易地调整function。
var swap = function () { var divs = document.getElementsByTagName('div'); var div1 = divs[0]; var div2 = divs[1]; var div3 = divs[2]; div3.parentNode.insertBefore(div1, div3); div1.parentNode.insertBefore(div3, div2); };
这个function可能看起来很奇怪，但为了正常运行，它依赖于标准。 实际上，它似乎比jQuery版本的function更好，tvanfosson发布似乎只做了两次交换。
它依赖于什么标准特性？
insertBefore在现有子节点refChild之前插入节点newChild。 如果refChild为null，则在子列表的末尾插入newChild。 如果newChild是一个DocumentFragment对象，则它的所有子元素都将以refChild之前的顺序插入。 如果newChild已经在树中，它将被首先删除。
在顶部提到的jquery方法将工作。 你也可以使用JQuery和CSS。例如对于你已经应用class1和div2你已经应用class class2（比如说每个类的css在浏览器上提供特定的位置）的div，现在你可以交换类使用jquery或JavaScript（这将改变位置）
对不起，碰到这个线程我偶然发现了“交换DOM元素”的问题，并发挥了一下
结果是一个jQuery原生的“解决scheme”，这似乎是非常漂亮的（不幸的是，我不知道这样做的jQuery内部发生了什么）
代码：
$('#element1').insertAfter($('#element2'));
jQuery文档说insertAfter() 移动元素并不克隆它
。之前和之后
使用现代香草JS！ 比以前更好/更干净
const div1 = document.getElementById("div1"); const div2 = document.getElementById("div2"); const div3 = document.getElementById("div3"); div2.after(div1); div2.before(div3);
