Cambiar el orden de los elementos

Question

Estoy creando un sitio web de ancho flotante. Los usuarios usan pantallas de resolución Full HD a unos 600px en teléfonos inteligentes, parece una muy buena idea. Esto trae a colación un problema muy interesante.

Cuando el usuario usa una resolución más pequeña que la óptima, la página obtiene mucha más altura. Esto significa que puede ser útil cambiar el orden de algunos elementos (por ejemplo, alguna imagen, cuadro de búsqueda o navegación) para hacer que la página sea más legible sin mucha necesidad de reclamo.

Necesito poder acceder a DOM y cambiar el orden de algunos elementos de la página (cambiarlos).

Digamos que tengo una lista y la necesidad de cambiar el punto 1 y 2.

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

he encontrado una solución basada en añadiendo elementos ya datos para <ul> mediante el uso de la función appendChild. Sin embargo, hay un problema con los nodos de texto y se vuelve realmente complicado hacerlo para una estructura de elementos más difícil, ya que la necesidad de volver a crearlo entero.

¿Tiene alguna sugerencia para mejorarlo?

Answer 1

Para este caso sencillo (intercambiando los únicos dos elementos), puede simplemente usar appendChild() (fiddle)

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

el mismo nodo no puede existir en múltiples posiciones; por lo tanto, se elimina de su posición actual y se coloca al final de la colección.

Si usted quiere hacer más complicada la clasificación, es probable que debe crear una matriz de los childNodes (yaf) y obtener todos locos:

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

no habría intercambio de innerHTML también trabajan?

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;