JavaScript consente di ristrutturare dinamicamente una pagina Web su un livello fondamentale. È possibile aggiungere e rimuovere elementi HTML al volo una volta caricata la pagina con il codice JavaScript. Creare un elenco utilizzando i tag HTML normale 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 ripetitivo.

Istruzioni

1

Inserire il codice JavaScript seguente tra i tag di "head" del documento HTML:

< script type = "text/javascript" >

Function rotateList(id) () {

var list = document.getElementById(id);

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

list.appendChild(first);

}

< / script >

2

Creare un elenco nel corpo del documento HTML con il seguente codice:

< ul id = "list1" >< li > 1 elemento </li >< li > 2 elemento </li >< li > 3 elemento </li >< li > 4 elemento </li >< li > 5 elemento </li >< / UL >

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

3

Aggiungere un pulsante al corpo del documento HTML per testare la funzione di "rotateList":

< tipo input = "pulsante" value = "Rotate" onClick="rotateList('list1');" / >

4

Salvare la pagina e caricarlo in un browser Web. Fare clic sul pulsante per ruotare l'elenco. La funzione funzionerà anche con liste ordinate ("ol" tag).