Làm thế nào để trao đổi các phần tử HTML trong javascript?

Question

Tôi đang sử dụng Javascript cổ điển cho tập lệnh DOM, tôi có một bộ DIV trong vùng chứa DIV. Khi được nhấp trường hợp đứa trẻ Bảo hiểm tiền gửi, tôi muốn rằng đứa trẻ DIV mà đã gây ra sự kiện để được swaped với DIV trên nó .. mã của tôi đi đây ..

<div id="container"> 
     <div onclick="swapDiv(event);">1</div> 
     <div onclick="swapDiv(event);">2</div> 
     <div onclick="swapDiv(event);">3</div> 
</div> 

nếu DIV 2 đã được nhấp vào nó nên được trao đổi với DIV 1

Answer 1

Mã này sẽ làm những gì bạn muốn (nếu bạn muốn trao đổi phần đã chọn với phần tử con đầu tiên). Trong trường hợp bạn muốn cái gì khác bạn cần phải chính xác hơn.

<script type="text/javascript"> 

function swapDiv(event,elem){ 
    elem.parentNode.insertBefore(elem,elem.parentNode.firstChild); 
} 

</script> 


<div id="container"> 
     <div onclick="swapDiv(event,this);">1</div> 
     <div onclick="swapDiv(event,this);">2</div> 
     <div onclick="swapDiv(event,this);">3</div> 
</div> 

Answer 2

Từ âm thanh của nó về cơ bản bạn chỉ muốn trao đổi các div với div trước đó, ergo với previousSibling. Bạn có thể xem xét việc thực hiện insertBefore nhưng thay vì tạo phần tử mới, hãy sử dụng phần tử hiện có. Tôi không chắc chắn những gì xảy ra với các sự kiện đính kèm tho, nếu họ sẽ được sao chép một cách chính xác.

Answer 3

Thuộc tính parentNode của phần tử cung cấp cho bạn nút cha của nó. Các phần tử có hàm insertBefore chèn phần tử trước phần tử tham chiếu khác (di chuyển nó nếu nó đã ở nơi khác trong cây). Và các nút có một số previousSibling cung cấp cho bạn nút anh chị em trước đó (có thể hoặc không thể là một phần tử). Vì vậy:

function swapDiv(elm) { 
    var previous = findPrevious(elm); 
    if (previous) { 
     elm.parentNode.insertBefore(elm, previous); 
    } 
} 

... nơi findPrevious trông như thế này:

function findPrevious(elm) { 
    do { 
     elm = elm.previousSibling; 
    } while (elm && elm.nodeType != 1); 
    return elm; 
} 

... nơi onclick thuộc tính của bạn nên là:

onclick="swapDiv(this);" 

... mặc dù bạn có thể muốn thay vào đó hãy tìm kiếm sự kiện DOM2 (addEventListener hoặc attachEvent trên IE).

Hơi cũ, nhưng tôi có thể khuyên bạn sử dụng bất kỳ thư viện nào có sẵn giúp cuộc sống của bạn dễ dàng hơn, chẳng hạn như Prototype, jQuery, Closure hoặc any of several others. Trên thực tế, đã xảy ra lỗi trong phiên bản cũ hơn bởi vì nó đã là rằng lâu kể từ khi tôi xử lý trực tiếp DOM. :-)

Answer 4

Về nguyên tắc, bạn chỉ cần insertBefore phần tử được nhấp trước phần tử anh chị em trước đó của nó. Tuy nhiên, sự hiện diện của khoảng trắng Các nút văn bản làm cho nó khó chịu hơn so với kịch bản truyền thống. Các Element Traversal API sẽ làm cho dễ dàng hơn này, nhưng cho đến khi nó được hỗ trợ rộng rãi hơn trong các trình duyệt, chức năng helper là cần thiết, Eg .:

<div id="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div> 

<script type="text/javascript"> 
    // Bind event to each line div 
    // 
    var div= firstElementChild(document.getElementById('container')); 
    while (div!==null) { 
     div.onclick= swapWithPreviousElement; 
     div= nextElementSibling(div); 
    } 

    // Move element before its previous element sibling 
    // 
    function swapWithPreviousElement() { 
     var previous= previousElementSibling(this); 
     if (previous!==null) 
      this.parentNode.insertBefore(this, previous); 
    } 


    // We've used some Element Traversal API methods but some 
    // browsers don't support them yet. Provide wrapper functions 
    // for compatibility. 
    // 
    function previousElementSibling(element) { 
     if ('previousElementSibling' in element) 
      return element.previousElementSibling; 
     do 
      element= element.previousSibling; 
     while (element!==null && element.nodeType!==1); 
     return element; 
    } 
    function nextElementSibling(element) { 
     if ('nextElementSibling' in element) 
      return element.nextElementSibling; 
     do 
      element= element.nextSibling; 
     while (element!==null && element.nodeType!==1); 
     return element; 
    } 
    function firstElementChild(element) { 
     if ('firstElementChild' in element) 
      return element.firstElementChild; 
     var child= element.firstChild; 
     while (child!==null && child.nodeType!==1) 
      child= child.nextSibling; 
     return child; 
    } 
</script> 

Answer 5

Swap bất kỳ nút, không anh chị em, anh chị em không adjecent, không có nút tạm, không có nhân bản, no jquery ... IE9 +

function swapNodes(n1, n2) { 

    var p1 = n1.parentNode; 
    var p2 = n2.parentNode; 
    var i1, i2; 

    if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; 

    for (var i = 0; i < p1.children.length; i++) { 
     if (p1.children[i].isEqualNode(n1)) { 
      i1 = i; 
     } 
    } 
    for (var i = 0; i < p2.children.length; i++) { 
     if (p2.children[i].isEqualNode(n2)) { 
      i2 = i; 
     } 
    } 

    if (p1.isEqualNode(p2) && i1 < i2) { 
     i2++; 
    } 
    p1.insertBefore(n2, p1.children[i1]); 
    p2.insertBefore(n1, p2.children[i2]); 
}