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

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

if you don't want to use jQuery you could easily adapt the function.

没有必要为这样一个琐碎的任务使用库:

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 会自动更新，以反映在操作 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]));

例如: -)

顶部提到的 Jquery 方法将会起作用。 您还可以使用 JQuery 和 CSS。假设对于 Div 1你已经应用了 class1和 div2你已经应用了 class2(假设对于 Div 1，css 的每个类都在浏览器上提供了特定的位置) ，现在你可以使用 jquery 或 javascript 来交换类(这会改变位置)

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 版本运行得更好，因为 Tvanfosson 发布的 jQuery 版本似乎只进行两次交换。

它所依赖的特殊标准是什么？

插入前 在现有子节点 refChild 之前插入节点 newChild RefChild 为 null，在 孩子名单的末尾。 如果 newChild 是 DocumentFragment 对象，则它的所有子对象都是 以同样的顺序插入 refChild. If the newChild is already 在树中，它首先被删除