Come scambiare elementi HTML in javascript?

Sto usando JavaScript classico per lo scripting DOM, ho un set di DIV in un contenitore DIV. Nell’evento click di DIV figlio, voglio che il figlio DIV che ha causato l’evento da scambiare con il DIV sopra di esso .. il mio codice va qui ..

1
2
3

se è stato fatto clic su DIV 2, è necessario sostituirlo con DIV 1

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

  
1
2
3

La proprietà parentNode un elemento parentNode dà il suo nodo genitore. 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 nodes hanno un previousSibling Sibling che ti dà il precedente nodo fratello (che può essere o non essere un elemento). Così:

 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 dovrebbero essere gli attributi onclick :

 onclick="swapDiv(this);" 

… anche se potresti voler esaminare il hook dell’evento DOM2 ( addEventListener o attachEvent su IE).

Leggermente OT, ma posso raccomandare l’utilizzo di una delle numerose librerie disponibili che ti semplificano la vita, come Prototype , jQuery , Closure o una qualsiasi di molte altre . In effetti, c’è stato un errore in una versione precedente di questo perché era da tanto che non mi occupavo direttamente del DOM. 🙂

Dai suoni di questo, in pratica, vuoi solo scambiare il div con il div prima di esso, ergo con il previousSibling . Potresti forse dare un’occhiata a 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.

In linea di principio devi solo inserire prima l’elemento su cui hai fatto clic prima del suo elemento precedente fratello. Tuttavia, la presenza di nodes di testo bianchi rende più fastidioso di quanto dovrebbe essere negli script tradizionali. L’ API Element Traversal renderà tutto più semplice, ma fino a quando non sarà più ampiamente supportato nei browser, le funzioni di supporto sono necessarie, ad es .:

 
1
2
3

Scambia qualsiasi nodo, non fratello, fratello non associato, nessun nodo temporaneo, niente clonazione, niente 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]); }