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

jQuery琐碎

$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

如果要重复执行此操作，则需要使用其他选择器，因为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, first

这考虑到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, first

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

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

例如 ：-）

。之前和之后

使用现代香草JS！比以前更好/更干净的方式。无需引用父母。

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

浏览器支持 -截至20年7月，全球支持率达到94.23％

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，则可以轻松修改该函数。

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);
};

该功能可能看起来很奇怪，但是它严重依赖于标准才能正常运行。实际上，它的功能似乎比tvanfosson发布的jQuery版本更好，后者只进行了两次交换。

它依赖什么标准特性？

insertBefore在现有子节点refChild之前插入节点newChild。如果refChild为null，则在子级列表的末尾插入newChild。如果newChild是DocumentFragment对象，则将其所有子级以相同顺序插入refChild之前。如果newChild已经在树中，则首先将其删除。

上面提到的Jquery方法将起作用。您也可以使用JQuery和CSS。例如，在Div上应用class1和div2上应用class2（例如，每个css类在浏览器中提供特定位置），现在您可以使用jquery或javascript（将更改位置）

很抱歉撞到这个线程，我偶然发现了“交换DOM元素”问题，玩了一下

结果是一个jQuery原生的“解决方案”，看起来似乎非常漂亮（不幸的是，我不知道这样做时jQuery内部发生了什么）

代码：

$('#element1').insertAfter($('#element2'));

jQuery文档说insertAfter() 移动元素而不克隆它