HTML elementen aanpassen

Het volgende voorbeeld plaats de datum in een reeds bestaande paragraaf.Weergeven

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Datum weergeven</title>
</head>
<body>
  <h1>Datum weergeven</h1>
  <p id="datum"></p>
  <script type="text/javascript">
    datum = new Date();
    document.getElementById("datum").innerHTML = datum.toLocaleDateString();
  </script>
</body>
</html>

Om HTML elementen te manipuleren gebruikt JavaScript de DOM methode getElementById(). Deze methode zorgt voor toegang tot het element met het opgegeven id. De eigenschap innerHTML zorgt ervoor dat de inhoud van het element vervangen wordt door de datum.

Let op het feit dat het JavaScript na het <p> element staat. Zo wordt het JavaScript pas uitgevoerd na het aanmaken van het <p> element. M.a.w. het <p> element moet bestaan om het te kunnen aanpassen.