<pre> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </pre>hay 5 elementos "li", quiero intercambiar el primer elemento "li" y el último elemento "li"? como esto:
<pre> <ul> <li>5</li> <li>2</li> <li>3</li> <li>4</li> <li>1</li> </ul> </pre>La pregunta es similar a esta: cambiar el orden de los elementos
Más fácil si tiene identificaciones únicas, pero es posible con nombres de etiquetas.
(function() { let list = document.querySelectorAll("pre > ul > li") list[0].parentNode.insertBefore(list[4], list[0]) list[0].parentNode.append(list[0]); })(); <pre> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </pre>La idea ingenua es obtener una lista de li, luego aparece la primera vez, luego empuja el mismo elemento en la lista y luego reemplaza a todos los niños.
Alternativamente, Obtenga el contenido del primer Li, último Li, luego reemplace los valores. La primera y la segunda opción son semánticamente diferentes. Uno copia nodos, mientras que el otro simplemente copia texto interno.