Elemento mobile JavaScript nel DOM

Diciamo che ho tre elementi

in una pagina. Come posso scambiare le posizioni del primo e del terzo

? jQuery va bene.

Trivial con jQuery

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

Se vuoi farlo ripetutamente, dovrai utilizzare diversi selettori poiché i div manterranno i loro ID mentre vengono spostati.

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

Non è necessario utilizzare una libreria per un compito così banale:

 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 

Ciò tiene conto del fatto che getElementsByTagName restituisce un NodeList attivo che viene automaticamente aggiornato per riflettere l’ordine degli elementi nel DOM man mano che vengono manipolati.

Puoi anche usare:

 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 

e ci sono varie altre possibili permutazioni, se hai voglia di sperimentare:

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

per esempio 🙂

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

e usalo in questo modo:

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

se non vuoi usare jQuery puoi facilmente adattare la funzione.

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

Questa funzione può sembrare strana, ma fa molto affidamento sugli standard per funzionare correttamente. In effetti, può sembrare che funzioni meglio della versione jQuery che tvanfosson ha pubblicato, che sembra fare lo scambio solo due volte.

Su quali caratteristiche standard fa affidamento?

insertBefore Inserisce il nodo newChild prima del nodo figlio esistente refChild. Se refChild è nullo, inserisci newChild alla fine dell’elenco di elementi secondari. Se newChild è un object DocumentFragment, tutti i relativi figli vengono inseriti, nello stesso ordine, prima di refChild. Se il newChild è già nella struttura, viene prima rimosso.

.prima e dopo

Usa la moderna vaniglia JS! Molto meglio / più pulito di prima

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

Supporto per browser : 84% globale, 87% USA a partire da marzo 18

L’approccio di Jquery menzionato sopra funzionerà. Puoi anche usare JQuery e CSS. Per esempio su Div uno che hai applicato class1 e div2 hai applicato class class2 (per esempio, ad esempio ogni class di css fornisce una posizione specifica sul browser), ora puoi scambiare le classi usando jquery o javascript (che cambierà la posizione)

Scusa per aver urtato questo thread, sono incappato nel problema del “swap DOM-elements” e ho giocato un po ‘

Il risultato è una “soluzione” nativa di jQuery che sembra essere davvero carina (sfortunatamente non so cosa sta succedendo negli interni di jQuery quando lo fai)

Il codice:

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

La documentazione di jQuery dice che insertAfter() sposta l’elemento e non lo clona