JavaScript HTML DOM - HTML wijzigen
Met de HTML DOM kan JavaScript de inhoud van HTML-elementen wijzigen.
HTML-inhoud wijzigen
De eenvoudigste manier om de inhoud van een HTML-element te wijzigen, is door de innerHTMLeigenschap te gebruiken.
Gebruik deze syntaxis om de inhoud van een HTML-element te wijzigen:
document.getElementById(id).innerHTML = new HTML
Dit voorbeeld verandert de inhoud van een <p>element:
Voorbeeld
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Voorbeeld uitgelegd:
- Het bovenstaande HTML-document bevat een
<p>element metid="p1" - We gebruiken de HTML DOM om het element te krijgen met
id="p1" - Een JavaScript verandert de inhoud (
innerHTML) van dat element in "Nieuwe tekst!"
Dit voorbeeld verandert de inhoud van een <h1>element:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
Voorbeeld uitgelegd:
- Het bovenstaande HTML-document bevat een
<h1>element metid="id01" - We gebruiken de HTML DOM om het element te krijgen met
id="id01" - Een JavaScript verandert de inhoud (
innerHTML) van dat element in "Nieuwe kop"
De waarde van een kenmerk wijzigen
Gebruik deze syntaxis om de waarde van een HTML-kenmerk te wijzigen:
document.getElementById(id).attribute = new value
Dit voorbeeld verandert de waarde van het src attribuut van een <img>element:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Voorbeeld uitgelegd:
- Het bovenstaande HTML-document bevat een
<img>element metid="myImage" - We gebruiken de HTML DOM om het element te krijgen met
id="myImage" - Een JavaScript verandert het
srcattribuut van dat element van "smiley.gif" in "landscape.jpg"
Dynamische HTML-inhoud
JavaScript kan dynamische HTML-inhoud creëren:
Datum: za 29 januari 2022 21:46:55 GMT+0000 (gecoördineerde universele tijd)
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write()
In JavaScript, document.write()kan worden gebruikt om rechtstreeks naar de HTML-uitvoerstroom te schrijven:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Nooit gebruiken document.write()nadat het document is geladen. Het zal het document overschrijven.