JavaScript HTML DOM - Verandering van HTML
Die HTML DOM laat JavaScript toe om die inhoud van HTML-elemente te verander.
Verandering van HTML-inhoud
Die maklikste manier om die inhoud van 'n HTML-element te verander, is deur die innerHTMLeiendom te gebruik.
Om die inhoud van 'n HTML-element te verander, gebruik hierdie sintaksis:
document.getElementById(id).innerHTML = new HTML
Hierdie voorbeeld verander die inhoud van 'n <p>element:
Voorbeeld
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
Voorbeeld verduidelik:
- Die HTML-dokument hierbo bevat 'n
<p>element metid="p1" - Ons gebruik die HTML DOM om die element mee te kry
id="p1" - 'n JavaScript verander die inhoud (
innerHTML) van daardie element na "Nuwe teks!"
Hierdie voorbeeld verander die inhoud van 'n <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 verduidelik:
- Die HTML-dokument hierbo bevat 'n
<h1>element metid="id01" - Ons gebruik die HTML DOM om die element mee te kry
id="id01" - 'n JavaScript verander die inhoud (
innerHTML) van daardie element na "Nuwe opskrif"
Verandering van die waarde van 'n eienskap
Om die waarde van 'n HTML-kenmerk te verander, gebruik hierdie sintaksis:
document.getElementById(id).attribute = new value
Hierdie voorbeeld verander die waarde van die src-kenmerk van 'n <img>element:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
Voorbeeld verduidelik:
- Die HTML-dokument hierbo bevat 'n
<img>element metid="myImage" - Ons gebruik die HTML DOM om die element mee te kry
id="myImage" - 'n JavaScript verander die
srckenmerk van daardie element van "smiley.gif" na "landscape.jpg"
Dinamiese HTML-inhoud
JavaScript kan dinamiese HTML-inhoud skep:
Datum : Sat 29 Jan 2022 21:12:32 GMT+0000 (Gekoördineerde Universele Tyd)
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write()
In JavaScript document.write()kan dit gebruik word om direk na die HTML-uitvoerstroom te skryf:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
Moet nooit gebruik document.write()nadat die dokument gelaai is nie. Dit sal die dokument oorskryf.