Creare elementi HTML con JavaScript

In parole semplici

JavaScript non deve solo cambiare elementi esistenti: può crearne di nuovi. Questo serve per mostrare liste, attività, prodotti o messaggi.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

• createElement: metodo per creare un nuovo elemento.
• append: metodo per inserirlo nella pagina.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

<ul id="lista"></ul>

<script>
  const lista = document.querySelector("#lista");
  const elemento = document.createElement("li");
  elemento.textContent = "Studiare JavaScript";
  lista.append(elemento);
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Crea una lista ul vuota.
2. Crea un elemento li con JavaScript.
3. Inserisci un testo con textContent.
4. Aggiungi li alla lista.
5. Ripeti con un secondo elemento.

Controllo finale

Hai finito quando gli elementi compaiono nella pagina anche se non erano scritti nell’HTML iniziale.