Dynamic HTML

<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>DHTML example</title>
     </head>
     <body>
          <div id="navigation"></div>

          <script>
varinit=function(){
myObj=document.getElementById("navigation");
// ... manipulate myObj
};
window.onload=init;
</script>

          <!--
      Walaupun kode tersebut disimpan pada file eksternal; ini bisa diselesaikan dengan membuat pranala file yang mengandung JavaScript.
      Hal ini berguna jika menggunakan skrip pemrograman yang sama pada beberapa [[halaman web]]:
          -->
          <script src="myjavascript.js"></script>
     </body>
</html>

<!doctype html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          <title>Cara menggunakan fungsi DOM</title>
          <style>
a{background-color:#eee;}
a:hover{background:#ff0;}
#contoh1{background:#cfc;display:none;margin:30px0;padding:1em;}
</style>
     </head>
     <body>
          <h1>Cara menggunakan fungsi DOM</h1>

          <h2><a id="tampilkansembunyikan" href="#">Tampilkan contoh</a></h2>

          <p id="contoh1">Ini adalah sebuah contoh.
      (Informasi tambahan, hanya ditampilkan jika diinginkan pengguna)...</p>

          <p>Lanjutan teks...</p>

          <script>
changeDisplayState=function(id){
vard=document.getElementById('tampilkansembunyikan'),
e=document.getElementById(id);
if(e.style.display==='none'||e.style.display===''){
e.style.display='block';
d.innerHTML='Sembunyikan contoh';
}
else{
e.style.display='none';
d.innerHTML='Tampilkan contoh';
}
};
document.getElementById('tampilkansembunyikan').onclick=function(){
changeDisplayState('contoh1');
returnfalse;
};
</script>
     </body>
</html>