Modifica HTML HTML DOM JavaScript

HTML DOM permette a JavaScript di modificare il contenuto degli elementi HTML.

modificare il flusso di output HTML

JavaScript può creare contenuti HTML dinamici：

In JavaScript:document.write() Può essere utilizzato per scrivere direttamente nel flusso di output HTML：

Esempio

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Prova tu stesso

Non utilizzare mai document.write(). Questo coprirà il documento.

modificare il contenuto HTML

Il metodo più semplice per modificare il contenuto di un documento HTML è utilizzare innerHTML proprietà.

Per modificare il contenuto di un elemento HTML, utilizzare questa sintassi：

document.getElementById(id).innerHTML = nuovo testo

Questo esempio modifica <p> Contenuto dell'elemento：

Esempio

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Prova tu stesso

Spiegazione dell'esempio:

  • Il documento HTML sopra contiene un elemento <p> con id="p1"
  • Usiamo HTML DOM per ottenere questo elemento con id="p1"
  • JavaScript cambia il contenuto dell'elemento (innerHTML) in "Hello Kitty!"

Questo esempio modifica <h1> Contenuto dell'elemento：

Esempio

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Vecchio Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "Nuovo Header";
</script>
</body>
</html>

Prova tu stesso

Spiegazione dell'esempio:

  • L'HTML sopra contiene un elemento <h1> con id="header"
  • Abbiamo utilizzato HTML DOM per ottenere l'elemento con id="header"
  • JavaScript cambia il contenuto di questo elemento (innerHTML)

Modifica del valore dell'attributo

Per modificare il valore di un attributo HTML, utilizzare la seguente sintassi:

document.getElementById(id).attributo = new value

Questo esempio modifica <img> elemento src Valore dell'attributo:

Esempio

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Prova tu stesso

Spiegazione dell'esempio:

  • Il documento HTML superiore contiene un elemento <img> con id="myImage"
  • Usiamo HTML DOM per ottenere l'elemento con id="myImage"
  • JavaScript cambia l'attributo src di questo elemento da "smiley.gif" a "landscape.jpg"