JavaScript: i dettagli della proprietà innerHTML

Questa proprietà non fa parte delle specifiche DOM ufficiali ma è diventata uno standard de facto in JavaScript.

Performance

In scrittura non facciamo altro che assemblare una stringa da usare con questa proprietà. Tuttavia occorre prestare attenzione a come innerHTML viene usata. Per esempio, il seguente codice:


for(let i = 0; i < 10; i++) {
  element.innerHTML += `<li>${i}</li>`;
}

ci penalizza in termini di performance, in quanto usiamo questa proprietà dieci volte e quindi abbiamo dieci chiamate al parser HTML. Invece, dobbiamo usare un approccio incrementale:


let html = '':

for(let i = 0; i < 10; i++) {
  html += `<li>${i}</li>`;
}
element.innerHTML = html;

In questo caso, invece, abbiamo una sola chiamata al parser HTML con un notevole miglioramento della performance.

Marcatura ben formata

Questa proprietà genera una nuova struttura DOM all'interno di un elemento, quindi è di vitale importanza che la stringa usata contenga marcatura ben formata, vale a dire con i tag correttamente annidati.

Spazio bianco

In lettura innerHTML restituisce la marcatura così com'è, incluso lo spazio bianco in essa presente. Caratteri come \t, \r, \n, \s che fanno parte dello spazio bianco vengono quindi restituiti insieme ai tag.

Possiamo normalizzare la stringa restituita usando il metodo trim():


const html = document.getElementById('test').innerHTML;
const trimSpace = html.trim();
Torna su