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

1. Creo elemento
2. Aggiungo contenuto
3. 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 = "";
});