58 createElement e createNode

Pubblicato il di

In questa lezione vedremo come inserire degli elementi HTML nel DOM.

Prendiamo come esempio il seguente ipotetico menu contenuto in un array

var menu =[
    {
        url :'http://www.google.it',
        title :'google.it'
    },
    {
        url :'http://www.italia.it',
        title :'google.it'
    },
    {
        url :'http://www.microsoft.it',
        title :'google.it'
    }
];

nell’array menu sono presenti 3 oggetti (racchiusi tra parentesi graffe), ogni oggetto ha 1 url a cui puntare e 1 title che sarà la voce del menu. Vediamo come andare ad inserire al volo questo menu nel DOM, potrebbe esserci stato passato da una chiamata AJAX per esempio.

Per prima cosa verifichiamo se la pagina è pronta

document.addEventListener('DOMContentLoaded', function () {
});

andiamo ad inizializzare le variabili d’ambiente necessarie:

document.addEventListener('DOMContentLoaded', function () {
    var  doc, ul, li, a,i, text;
      doc = document;
     
 });

utilizzando createElement() memorizziamo il comando per inserire un <ul> nel nostro documento

document.addEventListener('DOMContentLoaded', function () { 
var doc, ul, li, a,i, text; 
doc = document; 
ul = doc.createElement('ul');
});

poi dobbiamo ciclare il nostro array per prelevare i dati, trattandosi di un array possiamo avvalerci del comodo comando forEach specifico per ciclare gli array

menu.forEach(function(ele){

}

come si nota, il forEach si aspetta nel nostro caso una funzione che riceverà gli elementi.

Adesso nel ciclo andiamo a creare per ogni voce di menu i tag HTML corrispondenti, quindi un <li> e un tag <a>

menu.forEach(function(ele){
 li = doc.createElement('li');
 a = doc.createElement('a');
}

impostiamo l’ href per il tag <a>, essendo una proprietà nativa del tag possiamo impostarlo direttamente

a.href = ele.url;

url è il nome di una delle 2 proprietà degli oggetti dell’array menu.

Invece se devo aggiungere un attributo HTML che non è nativo di quell’elemento, come in questo caso href per il tag <a>,devo usare setAttribute() che vuole 2 parametri, il primo è il nome, il secondo il valore

a.setAttribute('title',ele.title);

Ora vogliamo inserire il testo contenuto nel tag <a>, la cosa può essere fatta utilizzando il metodo createTextNode() che inserisce un nodo con del contenuto testuale nel tag HTML

text = doc.createTextNode(ele.title);

ora che abbiamo creato tutti gli elementi dobbiamo inserirli nel DOM rispettando le giuste parentele.

a.appendChild(text);

con appendChild() vado ad aggiungere un elemento figlio, nel nostro caso un testo al tag <a>, il quale a sua volta dovrà essere figlio di <li> il quale sarà figlio di <ul>

li.appendChild(a);
ul.appendChild(li);

abbiamo finito gli elementi da includere nel ciclo. Fuori da forEach, ora dobbiamo inserire nel documento la nostra <ul>, la andremo a nel <body>

doc.body.appendChild(ul);

Se per esempio avessimo avuto nel <body> un <div> con ID container potrei inserire l’ <ul>. sfruttando il metodo querySelector()

doc.querySelector('#container').appendChild(ul)

Questo modo con cui abbiamo creato gli elementi e settato gli attributi è il corretto ragionamento logico, ma avremmo potuto sfruttare innerHTML() per inserire il tag <a> e i suoi attributi in modo più rapido

li.innerHTML ='<a href="'+ele.url+'">'+ele.title+'</a>';

abbiamo passato un pezzo di HTML al nostro elemento <li>, i 2 modi portano allo stesso risultato, innerHTML non è una proprietà standard del DOM, ma è supportato ormai da ogni browser, il primo modo è quello più corretto e logico.

Abbiamo analizzato le funzioni principali per manipolare il DOM, ne esistono molte altre, vi invito a riferirvi alla documentazione