JavaScript HTML DOM cambia contenuto HTML
HTML DOM consente JavaScript per modificare il contenuto dell'elemento HTML.
Modificare il flusso di output HTML
JavaScript può creare contenuti HTML dinamici:
La data di oggi è di:
In JavaScript, document.write () può essere usata per scrivere direttamente i contenuti HTML nel flusso di output.
Esempi
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Prova »
 | Non utilizzare mai document.write dopo che il documento è finito di caricare (). Questo sovrascrive il documento. |
|---|
Modificare il contenuto HTML
Utilizzando proprietà innerHTML Il modo più semplice per modificare il contenuto HTML.
Per modificare il contenuto dell'elemento HTML, utilizzare la seguente sintassi:
Questo esempio viene modificato il contenuto dell'elemento <p>:
Esempi
<Body>
<P id = "p1"> Ciao a tutti! </ P>
<Script>
document.getElementById ( "P1") innerHTML = "nuovo testo !.";
</ Script>
</ Corpo>
</ Html>
Prova »
Questo esempio viene modificato il contenuto dell'elemento <h1>:
Esempi
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
Prova »
Esempi di spiegare:
- Il documento HTML che contiene sopra id = "header" dell'elemento <h1>
- Usiamo il DOM HTML per ottenere l'id = elemento "header"
- JavaScript modifiche in questa contenuto degli elementi (innerHTML)
Modificare gli attributi HTML
Per modificare le proprietà di un elemento HTML, utilizzare la seguente sintassi:
Questo esempio viene modificato l'elemento attributo src <img>:
Esempi
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
Prova »
Esempi di spiegare:
- Il documento HTML che contiene sopra id = "image" dell'elemento <img>
- Usiamo il DOM HTML per ottenere l'id = elemento "immagine"
- JavaScript modificare le proprietà di tale elemento (il "smiley.gif" a "landscape.jpg")