Cómo girar una lista en JavaScript

JavaScript permite reestructurar dinámicamente una página Web en un nivel fundamental. Puede añadir y eliminar elementos HTML sobre la marcha después de que la página se ha cargado con el código JavaScript. Crear una lista con las etiquetas HTML normales, y luego escribir una función JavaScript para girar su contenido. Utilizar esta técnica para ayudar a ilustrar una serie de pasos o permitir al usuario realizar un seguimiento de su posición en un proceso repetitivo.

Instrucciones

1 Inserte el siguiente código JavaScript entre las etiquetas "cabeza" de su documento HTML:

<Script type = "text / javascript">

función rotateList (id) {

var list = document.getElementById(id);

var = primera list.removeChild (list.firstChild);

list.appendChild (primera);

}

</ Script>

2 Crear una lista en el cuerpo del documento HTML con código como el siguiente:

<Id ul = "list1"> <li> Artículo 1 </ li> <li> Artículo 2 </ li> <li> Artículo 3 </ li> <li> Artículo 4 </ li> <li> Artículo 5 < / li> </ ul>

Tenga en cuenta que la lista se le asigna un valor que identifica con el atributo "id". Este valor debe ser exclusivo en la lista y se utiliza para identificar qué lista para girar cuando se llama a la función "rotateList". También tenga en cuenta que no hay espacios o saltos de línea entre las etiquetas adyacentes "Li". El espacio en blanco entre los pares de etiquetas suele ser irrelevante en HTML, pero debido a la forma en que el Modelo de Objetos de Documento (DOM) es interpretada por muchos navegadores, es fundamental que se produzca ninguna en este caso (espacio en blanco dentro de un par de etiquetas "li" está muy bien, como se ilustra arriba).

3 Añadir un botón para que el cuerpo del documento HTML para probar la función "rotateList":

<Input type = "button" value = "Rotar" onclick = "rotateList ( 'lista1');" />

4 Guarde la página y lo carga en un navegador Web. Haga clic en el botón para rotar la lista. La función será trabajar con listas ordenadas (tags "OL") también.