Katakanlah saya memiliki tiga <div>elemen pada satu halaman. Bagaimana saya bisa menukar posisi pertama dan ketiga <div>? jQuery baik-baik saja.

Sepele dengan jQuery

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

Jika Anda ingin melakukannya berulang kali, Anda harus menggunakan selektor yang berbeda karena div akan mempertahankan id mereka saat dipindahkan.

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

Tidak perlu menggunakan perpustakaan untuk tugas sepele seperti itu:

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

Ini memperhitungkan fakta yang getElementsByTagNamemengembalikan NodeList langsung yang diperbarui secara otomatis untuk mencerminkan urutan elemen di DOM saat mereka dimanipulasi.

Anda juga bisa menggunakan:

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

dan ada berbagai kemungkinan permutasi lainnya, jika Anda ingin bereksperimen:

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

sebagai contoh :-)

.sebelum dan sesudah

Gunakan vanilla JS modern! Jauh lebih baik / lebih bersih dari sebelumnya. Tidak perlu merujuk orang tua.

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

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

Dukungan Browser - 94.23% Global per Juli '20

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

dan gunakan seperti ini:

$('#div1').swap('#div2');

jika Anda tidak ingin menggunakan jQuery, Anda dapat dengan mudah menyesuaikan fungsinya.

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

Fungsi ini mungkin tampak aneh, tetapi sangat bergantung pada standar agar dapat berfungsi dengan baik. Nyatanya, ini mungkin berfungsi lebih baik daripada versi jQuery yang diposting tvanfosson yang tampaknya hanya melakukan swap dua kali.

Keanehan standar apa yang diandalkannya?

insertBefore Menyisipkan node newChild sebelum node anak refChild yang ada. Jika refChild adalah null, masukkan newChild di akhir daftar anak. Jika newChild adalah objek DocumentFragment, semua anaknya akan dimasukkan, dalam urutan yang sama, sebelum refChild. Jika newChild sudah ada di pohon, pertama kali dihapus.

Pendekatan Jquery yang disebutkan di atas akan berhasil. Anda juga dapat menggunakan JQuery dan CSS. Katakan misalnya pada Div Anda telah menerapkan class1 dan div2 Anda telah menerapkan class class2 (katakanlah misalnya setiap kelas css menyediakan posisi tertentu di browser), sekarang Anda dapat menukar kelas menggunakan jquery atau javascript (yang akan mengubah posisi)

Maaf karena menabrak utas ini, saya tersandung masalah "tukar elemen DOM" dan bermain-main sedikit

Hasilnya adalah "solusi" jQuery-native yang tampaknya sangat cantik (sayangnya saya tidak tahu apa yang terjadi di internal jQuery saat melakukan ini)

Kode:

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

Dokumentasi jQuery mengatakan bahwa insertAfter() memindahkan elemen dan tidak mengkloningnya