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

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

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

$(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});

使用现代香草JS!比以前更好/更干净。无需提及父母。

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

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

支持所有现代浏览器!

Browser Support

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

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

这个功能可能看起来很奇怪,但它在很大程度上依赖于标准才能正常运行。事实上,它似乎比 the jQuery version that tvanfosson posted 这似乎只进行了两次交换。

refChild为null,请在以下位置插入newChild 孩子名单的末尾。 在树上,它首先被移除。

你也可以使用JQuery和CSS。例如,在Div 1中,您应用了类1,在div2中,您使用了类2(例如,每个css类在浏览器上都提供了特定的位置),现在您可以使用jquery或javascript交换这些类(这将改变位置)

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

jQuery文档说 insertAfter() 移动