DOM - DOCUMENT OBJECT MODEL

I browsers implementano l'interfaccia DOM che serve a:

Questa che vedete sotto รจ una lista di elementi creata dinamicamente

index.html 

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.
w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head>
<title>AJAX Foundations: More JavaScript and DOM</title>
<script type="text/javascript" src="jsdom2.js"></script>
</head>
<body onload="process()">
<div id="myDivElement" />
</body>
</html>
index.js 


function process() {
    // creiamo l'elemento <p> 
    oP = document.createElement("p");
    // creiamo il text node "Hello..." 
    oHelloText = document.createTextNode("Hey dude! Here's a 
    cool list of colors for you:");
    // aggiungiamo il text node come figlio di <p>
    oP.appendChild(oHelloText);
    // creiamo l'elemento <ul> 
    oUl = document.createElement("ul")
    // creiamo il primo <li> e mettiamoci del testo
    oLiBlack = document.createElement("li");
    oBlack = document.createTextNode("Black");
    oLiBlack.appendChild(oBlack);
    // creiamo il secondo <li> e mettiamoci del testo
    oLiOrange = document.createElement("li");
    oOrange = document.createTextNode("Orange");
    oLiOrange.appendChild(oOrange);
    // creiamo il terzo <li> e mettiamoci del testo
    oLiPink = document.createElement("li");
    oPink = document.createTextNode("Pink");
    oLiPink.appendChild(oPink);
    // aggiungiamo gli <li> all'elemnto <ul>
    oUl.appendChild(oLiBlack);
    oUl.appendChild(oLiOrange);
    oUl.appendChild(oLiPink);
    // otteniamo una reference all'elemento con id "myDivElement" nella mia pagina
    myDiv = document.getElementById("myElement");
    // aggiungiamo il contenuto al div
    myDiv.appendChild(oHelloText);
    myDiv.appendChild(oUl); 
}