Creare elementi con createElement -

In questa lezione impareremo a creare elementi HTML con JavaScript e inserirli nella pagina dinamicamente.

1. Perché usare `createElement`?

Fino ad ora hai modificato elementi già presenti nella pagina.

Ma se volessi aggiungere qualcosa che non esiste ancora? Allora entra in gioco:

document.createElement()

Dunque facciamo un esempio base facendo i vari passaggi. Supponiamo di voler creare un nuovo paragrafo, aggiungiamo del testo e lo inseriamo nella pagina.

1. Creiamo il paragrafo

let paragrafo = document.createElement("p");

👉 Abbimo creato un elemento <p>… ma ancora non si vede nella pagina!

Perché?
Perché non è stato inserito nella pagina.

2. Aggiungiamo il contenuto al paragrafo

paragrafo.innerText = "Ciao, sono un nuovo paragrafo!";

3. Inseriamo il paragafro nel DOM con il metodo appendChild

document.body.appendChild(paragrafo);

👉 Ora sì! L’elemento appare nella pagina.

Riepilogo passaggi

Creo elemento
Aggiungo contenuto
Lo inserisco nel DOM

let p = document.createElement("p");
p.innerText = "Nuovo elemento!";
document.body.appendChild(p);

Aggiungere stile o attributi

All’elemento possiamo aggiungere anche lo stile o degli attributi:

p.style.color = "blue";
p.classList.add("testo-importante");

Esempio completo (bottone che crea elementi)

HTML:

<button>Aggiungi paragrafo</button>

JavaScript:

let bottone = document.querySelector("button");

bottone.addEventListener("click", function() {
  let nuovo = document.createElement("p");
  nuovo.innerText = "Hai creato un nuovo elemento!";
  
  document.body.appendChild(nuovo);
});

👉 Ogni click = nuovo paragrafo

Attenzione (errore comune)

❌ Questo NON funziona:

document.createElement("p").innerText = "Ciao";

👉 Perché non salvate l’elemento in una variabile!

✔️ Ricordate di fare sempre così:

let p = document.createElement("p");
p.innerText = "Ciao";

Esercizio guidato

Obiettivo:

Creare una lista dinamica!

HTML:

Inseriamo una casella di input, un button e una lista che popoleremo dinamicamente:

<input type="text" id="input">
<button>Aggiungi</button>
<ul id="lista"></ul>

In JavaScript programmiamo il button che al click aggiunge nuovi elementi

let bottone = document.querySelector("button");
let input = document.getElementById("input");
let lista = document.getElementById("lista");

bottone.addEventListener("click", function() {
  let li = document.createElement("li");
  li.innerText = input.value;
  
  lista.appendChild(li);
  
  input.value = "";
});

👉 Abbiamo appena creato una lista della spesa dinamica

Spiegazione

Con questo codice:

let bottone = document.querySelector("button");
let input = document.getElementById("input");
let lista = document.getElementById("lista");

Stiamo dicendo a JavaScript:

“Dammi il bottone”
“Dammi l’input”
“Dammi la lista”

Evento click

bottone.addEventListener("click", function() {

Ogni volta che clicchiamo il bottone → esegue tutto il codice dentro

Creazione elemento

let li = document.createElement("li");

Creiamo un nuovo elemento HTML (<li>)
Ma questo elemento NON è ancora nella pagina!

Aggiungiamo il testo

li.innerText = input.value;

Prendiamo il testo scritto nell’input → lo mettiamo dentro il <li>

Inseririamo tutto nella lista

lista.appendChild(li);

Ora appare davvero nella pagina, all’interno di ul

Pulire input

input.value = "";

Serve per:

svuotare il campo
migliorare l’esperienza utente

Sfida

Proviamo a migliorare il progetto, aggiungendo un bottone per eliminare un elemento.

let bottone = document.querySelector("button");
let input = document.getElementById("input");
let lista = document.getElementById("lista");

bottone.addEventListener("click", function() {

  // Creo l'elemento li
  let li = document.createElement("li");

  // Inserisco il testo
  li.innerText = input.value;

  // Creo il bottone delete
  let deleteBtn = document.createElement("button");
  deleteBtn.innerText = "❌";

  // Evento click sul delete
  deleteBtn.addEventListener("click", function() {
    li.remove();
  });

  // Inserisco il bottone dentro l'elemento li
  li.appendChild(deleteBtn);

  // Inserisco l'elemento li nella lista
  lista.appendChild(li);

  // Svuoto l'input
  input.value = "";
});

1. Perché usare createElement?