<div>ページに3つの要素があるとします。最初と3番目の位置を入れ替えるにはどうすればよい<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操作時にDOM内の要素の順序を反映するように自動的に更新されるライブNodeList を返すという事実を考慮しています。

あなたも使うことができます：

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を使用することもできます。たとえば、div1にclass1を適用し、div2にクラスclass2を適用したとします（たとえば、cssの各クラスがブラウザ上で特定の位置を提供するなど）、jqueryまたはjavascript（位置を変更します）

このスレッドにぶつかって申し訳ありません。「DOM要素の入れ替え」の問題に遭遇し、少し遊んでみました。

結果は、jQueryネイティブの「解決策」であり、これは本当にきれいに見えます（残念ながら、これを行うときにjQueryの内部で何が起こっているのかわかりません）。

コード：

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

jQueryのドキュメントには、要素をinsertAfter() 移動し、それを複製しないと記載されています