Modifica dell'ordine degli elementi

Question

Sto creando un sito Web di larghezza variabile. Gli utenti usano schermi dalla risoluzione Full HD a circa 600 pixel su smartphone, sembra una buona idea. Questo porta a un problema molto interessante.

Quando l'utente utilizza una risoluzione inferiore a quella ottimale, la pagina diventa molto più alta. Ciò significa che potrebbe essere utile cambiare l'ordine di alcuni elementi (ad esempio un'immagine, casella di ricerca o navigazione) per rendere la pagina più leggibile senza bisogno di scrooling.

Quindi devo essere in grado di accedere al DOM e modificare l'ordine di alcuni elementi della pagina (scambiandoli).

Diciamo che ho una lista e la necessità di scambiare articoli 1 e 2.

<ul> 
    <li>1</li> 
    <li>2</li> 
</ul> 

ho trovato una soluzione basata su aggiungendo già articoli elementi <ul> utilizzando la funzione appendChild. Tuttavia c'è un problema con i nodi di testo e diventa davvero complicato farlo per una struttura di elementi più difficile, dal momento che è necessario ricrearlo di nuovo intero.

Avete qualche suggerimento per migliorarlo?

Answer 1

Per questo caso semplice (scambiando gli unici due elementi), si può utilizzare semplicemente appendChild() (fiddle)

var list = document.querySelector("ul"); 
list.appendChild(list.firstElementChild); 

Lo stesso nodo non può esistere in più posizioni; quindi, viene rimosso dalla sua posizione corrente e collocato alla fine della raccolta.

Se si vuole fare l'ordinamento più complicato, probabilmente si dovrebbe creare una matrice dalle childNodes (yaf) e ottenere tutti pazzi:

var list = document.querySelector("ul"); 
var items = list.querySelectorAll("li"); 
var sortedList = Array.from(items).sort(function(a, b) { 
    var c = a.firstElementChild.textContent, 
    d = b.firstElementChild.textContent; 
    return c < d ? -1 : c > d ? 1 : 0; 
}); 
for (let item of sortedList) { 
    list.appendChild(item); 
} 

Answer 2

non avrebbero scambiando innerHTML anche lavorare?

var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML; 
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML; 
myList.getElementsByTagName("li")[1].innerHTML = temp;