Creazione e inserimento di elementi in JavaScript

Ora impareremo a creare nuovi elementi DOM tramite JavaScript, per poi aggiungerli alla pagina. A questo scopo è previsto il metodo createElement. Come parametro di questo metodo bisogna passare il nome del tag che deve essere creato.

Se si registra il risultato di createElement in una variabile, in quella variabile ci sarà un elemento come se lo avessimo ottenuto tramite querySelector.

L'unica differenza - il nostro elemento non sarà posizionato sulla pagina. Per il resto possiamo cambiargli il testo, gli attributi, assegnare gestori di eventi e infine posizionarlo sulla pagina.

Per posizionare il nuovo elemento sulla pagina si utilizza il metodo appendChild. Questo metodo va applicato all'elemento in cui vogliamo inserire il nostro elemento. E come parametro del metodo va passato il nostro nuovo elemento, creato in precedenza tramite createElement.

Vediamo un esempio pratico. Supponiamo che abbiamo un div, e al suo interno - diversi paragrafi:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Creiamo un paragrafo, impostiamogli il testo e inseriamolo nella pagina alla fine del blocco #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Risultato dell'esecuzione del codice:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Dato ol:

<ol id="elem"></ol>

Inserisci alla fine un li con testo 'item'.

Dati ol e un pulsante:

<ol id="elem"></ol>
<button id="button">click me</button>

Fai in modo che al click sul pulsante alla fine della lista venga aggiunto un li con testo 'item'.