JavaScript consente si ristruttura in modo dinamico una pagina Web su un livello fondamentale. È possibile aggiungere e rimuovere elementi HTML al volo dopo che la pagina è stata caricata con codice JavaScript. Creare un elenco utilizzando le normali tag HTML, e quindi scrivere una funzione JavaScript per ruotare il contenuto. Utilizzare questa tecnica per illustrare una serie di passaggi o consentire all'utente di monitorare la sua posizione in un processo iterativo.

istruzione

1 Inserire il seguente codice JavaScript tra i tag "testa" del documento HTML:

<Script type = "text / javascript">

Funzione rotateList (id) {

var list = document.getElementById(id);

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

list.appendChild (prima);

}

</ Script>

2 Creare un elenco nel corpo del documento HTML con codice come questo:

<Ul id = "list1"> <li> Articolo 1 </ li> <li> Articolo 2 </ li> <li> Articolo 3 </ li> <li> Articolo 4 </ li> <li> Articolo 5 < / li> </ ul>

Si noti che l'elenco viene assegnato un valore di identificarsi con l'attributo "id". Questo valore deve essere univoco alla lista e sarà utilizzato per identificare quale lista di ruotare quando si chiama la funzione "rotateList". Si noti inoltre che non ci sono spazi o interruzioni di riga tra adiacenti tag "li". Lo spazio bianco tra le coppie di tag di solito è irrilevante in HTML, ma a causa del modo in cui il Document Object Model (DOM) è interpretato da molti browser, è fondamentale che ci sia nessuno in questo caso (spazio bianco all'interno di una coppia di tag "li" va bene, come illustrato sopra).

3 Aggiungere un pulsante per il corpo del documento HTML per testare la funzione "rotateList":

<Input type = valore "pulsante" = "Ruota" onclick = "rotateList ( 'lista1');" />

4 Salvare la pagina e caricare in un browser Web. Fare clic sul pulsante per ruotare l'elenco. La funzione lavorerà con liste ordinate (tag "OL") pure.