Come scambiare elementi HTML in javascript?

Question

Sto usando il classico Javascript per lo scripting DOM, ho un set di DIV in un contenitore DIV. Al clic caso di bambino DIV, voglio che la DIV bambino che ha causato evento da swaped con DIV sopra di esso .. mio codice va qui ..

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

se DIV 2 è stato cliccato dovrebbe scambiare con DIV 1

Answer 1

Questo codice farà ciò che si desidera (se si desidera scambiare il selezionato con il primo elemento figlio). Nel caso in cui desideri qualcos'altro, devi essere più preciso.

<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

Dai suoni di esso è fondamentalmente vuole solo scambiare il div con il div prima di esso, ergo con il previousSibling. Potresti forse guardare a fare un insertBefore ma invece di creare un nuovo elemento usa quello esistente. Non sono sicuro di cosa succede agli eventi allegati, se verranno copiati correttamente.

Answer 3

La proprietà parentNode di un elemento fornisce il nodo principale. Gli elementi hanno una funzione insertBefore che inserisce un elemento prima di un altro elemento di riferimento (spostandolo se è già altrove nell'albero). E i nodi hanno un previousSibling che ti dà il precedente nodo fratello (che può essere o non essere un elemento). Quindi:

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

... dove findPrevious assomiglia a questo:

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

... dove i vostri onclick attributi dovrebbe essere:

onclick="swapDiv(this);" 

... anche se si consiglia di guardare invece all'aggancio di eventi DOM2 (addEventListener o attachEvent su IE).

Un po 'OT, ma posso consiglia di utilizzare una qualsiasi delle varie librerie disponibili che rendono la vita più facile, come ad esempio Prototype, jQuery, Closure o any of several others. In effetti, c'era un errore in una versione precedente di questo perché era che da tempo mi occupavo del DOM direttamente. :-)

Answer 4

In linea di principio si è appena insertBefore l'elemento su cui si è fatto clic prima del suo elemento precedente fratello. Tuttavia, la presenza di nodi di testo bianchi rende più fastidioso di quanto dovrebbe essere negli script tradizionali. Il Element Traversal API renderà questo più facile, ma fino a quando non è più ampiamente supportato nei browser, sono necessarie funzioni di supporto, ad esempio .:

<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 tutti i nodi, non fratelli, fratelli non adjecent, nessun nodo temporanei, senza la clonazione, 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]); 
}