Vom folosi acum javascript pentru crearea conţinutului DOM al documentului; un fişier HTML este încă necesar - dar acum nu pentru a defini tabelul, ci pentru declaraţiile specifice din <head> şi pentru apelul funcţiei care va construi tabelul orarului în DOM, transmiţându-i eventual şi o variabilă corespunzătoare datelor orarului (iar modificarea orarului va necesita modificarea acestei variabile - ceea ce este mult mai comod decât modificarea HTML-ului static din varianta I anterioară).

<!-- fişierul "orar-2.html" -->
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="stil-1.css" type="text/css">
    <script type="text/javascript" src="dyn-orar.js"></script> 
    <title>Orar cl. a IX-a A</title>
    <script type="text/javascript">
        var orar = {
'Luni': ['Informatică', 'Informatică', 'Informatică', 'Informatică', 'Ed. fizică', 'Matematică', 'Biologie'],
'Marţi': ['Franceză', 'Română', 'Matematică', 'Fizică', 'Religie', 'Engleză', 'Logică'],
'Miercuri': ['Informatică', 'Informatică', 'Fizică', 'Biologie', 'Matematică', 'Română', 'Muzică'],
'Joi': ['Chimie', 'Geografie', 'Română', 'Matematică', 'Română', 'Engleză', 'Franceză'],
'Vineri': ['Istorie', 'Ed. fizică', 'Chimie', 'Fizică', 'Desen', 'Matematică', 'Dirigenţie']
        };
    </script>    
</head>
<body>
   <div id="dyntb" style="margin-left:30%"> </div>
   <script type="text/javascript">
      set_DOM_orar(orar, 'dyntb');
   </script>
</body>

La încărcarea acestui fişier, browserul va executa scriptul existent în <head> - ceea ce va determina constituirea variabilei (sau obiectului) de memorie orar.

Cum se vede în <head>, această variabilă reprezintă un "tablou de asocieri" (sau un hash) - anume, asocieri între un "nume" şi o "valoare", sub forma sintactică 'nume': valoare (separate între ele prin virgulă şi conţinute împreună între acolade). Valoarea asociată poate să fie orice fel de obiect: şir de caractere, un număr, un tablou de valori (sau un alt obiect); aici, valorile asociate sunt tablouri de şiruri.

Accesul la o valoare este asigurat prin . şi prin [ ] (cu rolul de a selecta un membru al obiectului, sau o valoare de un anumit rang); astfel, alert(orar['Luni']) (sau cu punct, orar.Luni) va afişa tabloul orelor asociate cu 'Luni', iar alert(orar.Luni[6]) va afişa 'Biologie' (a şasea componentă din tabloul asociat cu 'Luni'; ca şi în alte multe limbaje, prima componentă din tablou are indicele 0).

Totodată browserul instanţiază în memorie şi DOM-ul corespunzător documentului încărcat, ca un arbore în care fiecare nod reprezintă un element, un atribut, o dată de tip caracter (un text), sau un alt obiect; rădăcina acestui arbore este nodul (obiectul) document; desfăşurarea ierarhică a nodurilor arborelui corespunde structurii elementelor HTML.

Nodul rădăcină document implementează o interfaţă prin care se pot accesa şi se pot crea alte noduri din arborele documentului, prin metode denumite sugestiv: getElementById(), createElement(), createAttribute(), etc. De exemplu, var obj = document.getElementById('dyntb'); va identifica nodul corespunzător identificatorului "dyntb" (vezi primul element din <body> în sursa HTML redată mai sus) şi va reţine în variabila "obj" o referinţă la obiectul respectiv.

Fiecare nod din această reprezentare arborescentă instanţiază şi o interfaţă "Node", din care folosim în fişierul următor metodele appendChild() şi cloneNode(). De exemplu, secvenţa

        var para = document.createElement("p");  // în HTML: <p></p>
        var p1 = para.cloneNode(true); 
        var p2 = para.cloneNode(true);
        p1.appendChild(document.createTextNode("paragraf-1")); // <p>paragraf-1</p>
        p2.innerHTML = "<b>paragraf-2</b>"; // <p><b>paragraf-1</b></p>

creează un obiect "paragraf", referit apoi prin variabila para; "clonează" acest obiect în variabilele p1 şi p2 (evitând crearea "din nou", care este mai costisitoare); apoi, nodului referit de p1 i se ataşează ca nou "fiu" nodul-text "paragraf-1". Metoda innerHTML permite ataşarea unui întreg subarbore de obiecte (nu a unui singur nod) - anume, subarborele corespunzător secvenţei HTML furnizate.

Scriptul existent la sfârşitul fişierului de mai sus invocă funcţia set_DOM_orar(), existentă în fişierul "dyn-orar.js" (fişier care a fost menţionat în atributul src - vezi linia a treia din <head> - şi a fost deja încărcat de către browser); invocarea se face transmiţând o referinţă la variabila orar, precum şi identificatorul "dyntb"; funcţia set_DOM_orar() va crea tabelul corespunzător orarului şi-l va înscrie drept conţinut diviziunii al cărei identificator i-a fost transmis.

// fişierul "dyn-orar.js"
var zile = ['Luni','Marţi','Miercuri','Joi','Vineri']; // "array"-ul cheilor din hash-ul zile{}

function set_DOM_orar (orar, div_id) { 
   var dest = document.getElementById(div_id);
   var tabel = document.createElement('table');

   var TR = document.createElement('tr'); // nodurile TR, TH, TD vor fi apoi "clonate"
   var TH = document.createElement('th'); // evitând recrearea lor
   var TD = document.createElement('td');
   var row, cel; 

   var thead = document.createElement('thead'); // secţiunea <thead> a tabelului
   row = TR.cloneNode(true);
   for(var zi = 0; zi < 5; zi++) { 
      cel = TH.cloneNode(true); 
      cel.innerHTML = zile[zi]; 
      row.appendChild(cel);
   }
   thead.appendChild(row);

   tabel.appendChild(thead);

   var tfoot = document.createElement('tfoot'); // secţiunea <tfoot>
   row = TR.cloneNode(true); 
   cel = TD.cloneNode(true); 
   cel.setAttribute('colspan', '5');
   cel.innerHTML = "Program: 13<sup>10</sup>—20<sup>00</sup>";
   row.appendChild(cel);
   tfoot.appendChild(row);

   tabel.appendChild(tfoot);

   var tbody = document.createElement('tbody'); // secţiunea <tbody>
   row = TR.cloneNode(true); 
   for(var zi = 0; zi < 5; zi++) { // zi < zile.length;
      cel = TD.cloneNode(true); 
      if(zi == 1 || zi == 3) 
            cel.setAttribute('class', 'altern');
      cel.innerHTML = orar[zile[zi]].join('<br>'); 
      row.appendChild(cel);
   }
   tbody.appendChild(row);

   tabel.appendChild(tbody);

   dest.appendChild(tabel); // înscrie tabelul în elementul cu ID = 'div_id'   
}

În <tbody> s-a creat un element <tr> căruia i-au fost apoi ataşate ca noduri "child" 5 elemente <td>. Fiecare <td> a primit drept conţinut orele din tabloul orar[zile[zi]], separate prin <br>; s-a folosit în acest scop metoda join din obiectul nativ Array. De exemplu, orar.Marţi.join('<br>') va "concatena" elementele tabloului orar.Marţi, separându-le prin <br> - rezultând şirul Franceză<br>Română<br>Matematică<br>Fizică<br>Religie<br>Engleză<br>Logică (care este apoi înscris în "cell"-ul respectiv, iar acesta este adăugat ca "fiu" <td>, nodului <tr>).

Programele sunt redate cu "syntax highlight", folosind biblioteca DlHighlight (a JavaScript-based syntax highlighting engine).