Phần tử di chuyển JavaScript trong DOM

Question

Giả sử tôi có ba thành phần <div> trên một trang. Làm cách nào tôi có thể trao đổi các vị trí của số <div> đầu tiên và thứ ba? jQuery là tốt.

Answer 1

Trivial với jQuery

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

Nếu bạn muốn làm điều đó lặp đi lặp lại, bạn sẽ cần phải sử dụng bộ chọn khác nhau kể từ khi divs sẽ giữ lại id của họ khi họ đang di chuyển xung quanh.

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

Answer 2

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

và sử dụng nó như thế này:

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

nếu bạn không muốn sử dụng jQuery bạn có thể dễ dàng thích nghi với chức năng.

Answer 3

Không cần phải sử dụng một thư viện cho một công việc tầm thường như vậy:

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, third 

này có tài khoản thực tế là getElementsByTagName trả về một NodeList sống được tự động cập nhật để phản ánh thứ tự của các yếu tố trong DOM khi chúng được điều khiển.

Bạn cũng có thể sử dụng:

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, third 

và có nhiều hoán vị có thể khác, nếu bạn cảm thấy như thử nghiệm:

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

ví dụ :-)

Answer 4

Jquery cách tiếp cận nêu trên đầu sẽ hoạt động. Bạn cũng có thể sử dụng JQuery và CSS .Say cho ví dụ trên Div bạn đã áp dụng class1 và div2 bạn đã áp dụng class class2 (ví dụ: mỗi lớp css cung cấp vị trí cụ thể trên trình duyệt), bây giờ bạn có thể trao đổi các lớp bằng jquery hoặc javascript (sẽ thay đổi vị trí)

Answer 5

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

Chức năng này có vẻ lạ, nhưng nó phụ thuộc rất nhiều vào các tiêu chuẩn để hoạt động bình thường. Trong thực tế, nó có vẻ hoạt động tốt hơn the jQuery version that tvanfosson posted mà dường như chỉ thực hiện trao đổi hai lần.

Những đặc điểm tiêu chuẩn nào mà nó dựa vào?

insertBefore Chèn nút mớiChild trước nút con hiện tại refChild. Nếu refChild là không, hãy chèn newChild tại vào cuối danh sách trẻ em. Nếu newChild là đối tượng DocumentFragment, tất cả các con của nó là được chèn vào, theo cùng thứ tự, trước refChild. Nếu newChild đã là trên cây, nó được loại bỏ trước tiên.

Answer 6

Xin lỗi vì chạm chủ đề này Tôi vấp trên "hoán đổi DOM-yếu tố" vấn đề và chơi xung quanh một chút

Kết quả là một "giải pháp" jQuery bản địa mà có vẻ là thực sự khá (tiếc là tôi không biết whats xảy ra tại internals jQuery khi làm điều này)

Bộ luật:

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

các tài liệu jQuery nói t mũ insertAfter()di chuyển phần tử và không sao chép nó

Answer 7

.before và .Sau

Sử dụng vani hiện đại JS! Cách tốt hơn/sạch hơn so với trước đây

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

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

Browser Support - 84% toàn cầu, 87% ở Hoa Kỳ như của Mar '18