Giocare con gli elementi di una pagina

<script> function script1() { var e = document.getElementById("pluto"); e.innerHTML = "Benone!"; } </script> <div id="pluto"> Ciao come stai? </div> <input type="button" value="Esegui esempio" onClick="script1()" />

Provate a guardare il codice dell'esempio 1 e ad utilizzarlo (basta premere il bottone Esegui esempio). Alla pressione del bottone il contenuto dell'elemento DIV che ha come id pluto viene modificato da "Come stai" a "Benone!". Guardando il codice si capisce subito che farlo è molto semplice, questa è la funzione script1 che viene richiamata alla pressione del pulsante:

function script1() {
    var e = document.getElementById("pluto");
    e.innerHTML = "Benone!";
}

La funzione script1 chiama la funzione document.getElementById passando come argomento l'identificativo del DIV, e quello che viene ritornato è un riferimento all'oggetto che rappresenta il nostro DIV nella pagina HTML. L'oggetto in questione ha una proprietà chiamata innerHTML che può essere letta/scritta. Se viene letta restituisce il codice HTML presente dentro il DIV, se viene scrittta settandola a qualcosa di diverso come abbiamo fatto noi nell'ultima riga della funzione script1 il contenuto del DIV cambia e gli effetti si vedono immediatamente nella pagina. Facile no?