Come inserire dati a una lista in HTML da un oggetto Javascript

In questo articolo vedremo come inserire degli elementi <li> in una lista creata in HTML, in modo dinamico utilizzando Javascript. Innanzitutto creiamo il nostro oggetto Persona che avrà un nome, un cognome, un'età e il sesso, tramite una funzione Javascript che avrà anche alcuni metodi get, in questo modo:

function Persona(nome, cognome, eta, sesso){
                this.nome = nome;
                this.cognome = cognome;
                this.eta = eta;
                this.sesso = sesso;
               
                this.getNome = function(){
                    return this.nome;
                };
                this.getCognome = function(){
                    return this.cognome;
                };
                this.getEta = function(){
                    return this.eta;
                };
                this.getSesso = function(){
                    return this.sesso;
                };
 }

Supponiamo quindi di dover riempire il div seguente, con id "test", con il contenuto degli oggetti persona che istanzieremo in seguito:

<div id="test">

</div>

A questo punto istanziamo gli oggetti persona1 e persona2 assegnandogli dei dati in questo modo:

var persona1 = new Persona("Renzo", "Cappelli", "23", "M");
var persona2 = new Persona("Alessia", "Reato", "23", "F");

Di seguito scriviamo il codice Javascript che immette nel div gli elementi ul e li della lista HTML:

var obj = document.getElementById("test");
           
var ulannidato = document.createElement("ul"); //creiamo l'elemento ul nel DOM
           
var persone = [persona1, persona2];
for(var i=0; i<persone.length; i++){
    var liannidato = ulannidato.appendChild(document.createElement("li"));
        liannidato.appendChild(document.createTextNode(persone[i].getNome() + " " + persone[i].getCognome())); //appendiamo e riempiamo gli li
}
obj.appendChild(ulannidato);

Fatto questo avremo una lista dentro il div con id "test" riempita con i dati degli oggetti istanziati (persona1 e persona2). Si poteva fare la stessa cosa prendendo i dati da un'array JSON o da altre fonti come un feed RSS ma la sintassi per riempire la lista sarà uguale.