Il DOM HTML consente JavaScript per modificare il contenuto degli elementi HTML.
Modifica del flusso di output HTML
JavaScript può creare contenuti HTML dinamici:
Data:Dom 6 Nov 2016 19:23:35 GMT + 0800 (中国标准时间)
In JavaScript, document.write() può essere usata per scrivere direttamente nel flusso di output HTML:
Esempio
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Prova tu stesso " Non usare document.write() dopo che il documento è stato caricato. Sarà sovrascrivere il documento.
Modifica contenuti HTML
Il modo più semplice per modificare il contenuto di un elemento HTML è utilizzando la innerHTML proprietà.
Per modificare il contenuto di un elemento HTML, utilizzare la seguente sintassi:
document.getElementById(id).innerHTML = new HTML
Questo esempio modifica il contenuto di un <p> elemento:
Esempio
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Prova tu stesso " Questo esempio viene modificato il contenuto di un <h1> elemento:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
Prova tu stesso " Esempio spiegato:
- Il documento HTML di cui sopra contiene un <h1> elemento con id="header"
- Usiamo il DOM HTML per ottenere l'elemento con id="header"
- Un JavaScript cambia il contenuto (innerHTML) di quell'elemento
Cambiare il valore di un attributo
Per modificare il valore di un attributo HTML, utilizzare la seguente sintassi:
document.getElementById(id).attribute=new value
Questo esempio viene modificato il valore dell'attributo src di un <img> elemento:
Esempio
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Prova tu stesso " Esempio spiegato:
- Il documento HTML di cui sopra contiene un <img> elemento con id="myImage"
- Usiamo il DOM HTML per ottenere l'elemento con id="myImage"
- Un JavaScript cambia il src attributo di tale elemento da "smiley.gif" a "landscape.jpg"
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »