Làm thế nào để trao đổi các nút con DOM trong JavaScript?

Question

Cách dễ nhất để hoán đổi thứ tự các nút con là gì?

Ví dụ: tôi muốn childNode [3] là childNode [4] và ngược lại.

Answer 1

Không cần sao chép. Bạn chỉ có thể di chuyển một nút trước nút kia với điều này:

childNode[4].parentNode.insertBefore(childNode[4], childNode[3]); 

Bạn nhận được cha mẹ của nút. Sau đó, bạn gọi phương thức insertBefore trên parent và bạn chuyển nó vào nút childNode [4] và nói với nó rằng bạn muốn nó được chèn vào trước childNode [3]. Điều đó sẽ cho bạn kết quả của việc hoán đổi thứ tự của họ để 4 sẽ là trước khi nó được thực hiện.

Tham khảo documentation on insertBefore.

Bất kỳ nút nào được chèn vào DOM đã có trong DOM lần đầu tiên được xóa tự động và sau đó được chèn trở lại để không cần phải xóa thủ công trước đó.

Answer 2

Trả lời bởi jfriend00 không thực sự hoán đổi các phần tử (nó "hoán đổi" chỉ các phần tử nằm cạnh nhau và chỉ trong cùng một nút cha). Điều này là ok, vì đây là câu hỏi.

Ví dụ này giao dịch hoán đổi các yếu tố bằng cách nhân bản nó nhưng không phân biệt vị trí của họ và mức độ DOM:

// Note: Cloned copy of element1 will be returned to get a new reference back 
function exchangeElements(element1, element2) 
{ 
    var clonedElement1 = element1.cloneNode(true); 
    var clonedElement2 = element2.cloneNode(true); 

    element2.parentNode.replaceChild(clonedElement1, element2); 
    element1.parentNode.replaceChild(clonedElement2, element1); 

    return clonedElement1; 
} 

Edit: thêm trở lại của tham chiếu mới (nếu bạn muốn giữ lại các tài liệu tham khảo, ví dụ như để truy cập vào thuộc tính "parentNode "(nếu không bị mất)). Ví dụ: e1 = exchangeElements (e1, e2);

Answer 3

Đối với một Swap thực sự của bất kỳ nút mà không cần cloneNode:

<div id="d1">D1</div> 
    <div id="d2">D2</div> 
    <div id="d3">D3</div> 

Với chức năng SwapNode (sử dụng PrototypeJS):

function SwapNode(N1, N2) { 
N1 = $(N1); 
N2 = $(N2); 

if (N1 && N2) { 
    var P1 = N1.parentNode; 
    var T1 = document.createElement("span");  
    P1.insertBefore(T1, N1); 

    var P2 = N2.parentNode; 
    var T2 = document.createElement("span"); 
    P2.insertBefore(T2, N2); 

    P1.insertBefore(N2, T1); 
    P2.insertBefore(N1, T2); 

    P1.removeChild(T1); 
    P2.removeChild(T2); 
} 
} 
SwapNode('d1', 'd2'); 
SwapNode('d2', 'd3'); 

Sẽ tạo ra:

<div id="d3">D3</div> 
<div id="d1">D1</div> 
<div id="d2">D2</div> 

Answer 4

Hãy thử phương pháp này :

1. Get the parent element
2. Store two elements you want to swap

3. Store .nextSibling of the node that is last in order ví dụ: [1,2,3,4] => chúng tôi muốn trao đổi 3 & 2 sau đó lưu trữ nextSibling 3, '4'.

4. .insertBefore (3.2);

5. .insertBefore (2, nextSibling);

Answer 5

Tôi cần một hàm để hoán đổi hai nút tùy ý giữ các phần tử được hoán đổi trong cùng một vị trí trong dom.Ví dụ, nếu một đang ở vị trí thứ 2 liên quan đến mẹ và b là ở vị trí 0 so với mẹ của nó, b nên thay thế vị trí thứ 2 của một cựu mẹ 's và một nên thay thế con 0 của b là cha mẹ cũ của.

Đây là giải pháp của tôi cho phép trao đổi ở các phần hoàn toàn khác nhau của mái vòm. Lưu ý rằng trao đổi không thể là một hoán đổi ba bước đơn giản. Mỗi một trong hai yếu tố cần phải được loại bỏ khỏi dom trước tiên vì chúng có thể có anh chị em cần cập nhật, v.v.

Giải pháp: Tôi đặt hai ngăn chứa giữ vị trí của mỗi nút để giữ thứ tự anh em tương đối. Sau đó tôi chèn lại từng nút trong trình giữ chỗ của người khác, giữ vị trí tương đối mà nút đã hoán đổi có trước khi hoán đổi. (Giải pháp của tôi tương tự như của Buck).

chức năng swapDom (a, b) {

var aParent = a.parentNode; 
var bParent = b.parentNode; 

var aHolder = document.createElement("div"); 
var bHolder = document.createElement("div"); 

aParent.replaceChild(aHolder,a); 
bParent.replaceChild(bHolder,b); 

aParent.replaceChild(b,aHolder); 
bParent.replaceChild(a,bHolder); 

}

Answer 6

Sử dụng .before hay .after!

Đây là vani JS!

childNode[3].before(childNode[4]); 

hoặc

childNode[4].after(childNode[3]); 

Để biết thêm độ bền trao đổi, hãy thử:

function swap(node1, node2) { 
    const afterNode2 = node2.nextElementSibling; 
    const parent = node2.parentNode; 
    node1.replaceWith(node2); 
    parent.insertBefore(node1, afterNode2); 
} 

này nên làm việc, ngay cả khi bố mẹ không phù hợp