Con questi esercizi imparete a creare elementi HTML dinamicamente usando JavaScript.

Obiettivo:

• usare document.createElement()
• usare appendChild()
• manipolare il DOM senza scrivere HTML statico

Esercizio 1 – Paragrafo dinamico

Crea un bottone che, al click, aggiunge un paragrafo con scritto:

“Ciao mondo!”

Esercizio 2 – Lista numerata

Crea:

• un bottone
• una lista <ul>

Ogni click aggiunge:

• un <li> con testo “Elemento X” (numero progressivo)

Esercizio 3 – Titolo dinamico

Al click su un bottone:

• crea un <h2>
• inseriscilo dentro un <div>

Esercizio 4 – Testo con createTextNode

Crea un paragrafo usando SOLO:

• createElement
• createTextNode

❌ Non usare innerHTML

Esercizio 5 – Card

Al click su un bottone crea questa struttura:

<div class="card">
  <h3>Titolo</h3>
  <p>Descrizione</p>
</div>

Tutto deve essere creato con JavaScript.

Esercizio 6 – Input dinamico

• input + bottone
• al click crea un paragrafo con il testo inserito

Esercizio 7 – Todo list

Crea una lista di cose da fare:

• input + bottone
• aggiunge <li>
• ogni elemento ha un bottone “Elimina”

SOLUZIONI

---

✅ Soluzione 1

<button id="btn">Crea paragrafo</button>

<script>
document.getElementById("btn").addEventListener("click", function () {
  const p = document.createElement("p");
  p.textContent = "Ciao mondo!";
  document.body.appendChild(p);
});
</script>

---

✅ Soluzione 2

<button id="btn">Aggiungi</button>
<ul id="lista"></ul>

<script>
let i = 1;
document.getElementById("btn").addEventListener("click", function () {
  const li = document.createElement("li");
  li.textContent = "Elemento " + i;

  document.getElementById("lista").appendChild(li);
  i++;
});
</script>

---

✅ Soluzione 3

<button id="btn">Crea titolo</button>
<div id="box"></div>

<script>
document.getElementById("btn").addEventListener("click", function () {
  const h2 = document.createElement("h2");
  h2.textContent = "Titolo dinamico";
  document.getElementById("box").appendChild(h2);
});
</script>

---

✅ Soluzione 4

<script>
const p = document.createElement("p");
const text = document.createTextNode("Testo creato con createTextNode");
p.appendChild(text);
document.body.appendChild(p);
</script>

---

✅ Soluzione 5

<button id="btn">Crea card</button>

<script>
document.getElementById("btn").addEventListener("click", function () {
  const card = document.createElement("div");
  card.className = "card";  
  const h3 = document.createElement("h3");
  h3.textContent = "Titolo";  
  const p = document.createElement("p");
  p.textContent = "Descrizione";  

  card.appendChild(h3);
  card.appendChild(p);  
  document.body.appendChild(card);
});
</script>

---

✅ Soluzione 6

<input id="input">
<button id="btn">Aggiungi</button>

<script>
document.getElementById("btn").addEventListener("click", function () {
  const p = document.createElement("p");
  p.textContent = document.getElementById("input").value;

  document.body.appendChild(p);
});
</script>

---

✅ Soluzione 7 – Todo list

<input id="input">
<button id="btn">Aggiungi</button>
<ul id="lista"></ul>

<script>
const input = document.getElementById("input");
const lista = document.getElementById("lista");

document.getElementById("btn").addEventListener("click", function () {
  const li = document.createElement("li");
  li.textContent = input.value;  

  const btnElimina = document.createElement("button");
  btnElimina.textContent = "Elimina"; 
 
  btnElimina.addEventListener("click", function () {
    lista.removeChild(li);
  });  

  li.appendChild(btnElimina);
  lista.appendChild(li);
});
</script>