Esercizi Generare Elementi DOM Javascript

Ecco degli esercizi semplici con soluzione per praticare le basi della generazione di elementi DOM in Javascript.

Esercizio 1

Creare un nuovo elemento `div` e aggiungerlo al body del documento:

const nuovoDiv = document.createElement("div");
document.body.appendChild(nuovoDiv);

Esercizio 2

Creare un nuovo elemento `p`, aggiungere del testo al suo interno e aggiungerlo a un elemento padre specifico:

const nuovoParagrafo = document.createElement("p");
nuovoParagrafo.textContent = "Questo è un nuovo paragrafo";
const elementoPadre = document.getElementById("elementoPadre");
elementoPadre.appendChild(nuovoParagrafo);

Esercizio 3

Creare un nuovo elemento `img` e impostare l'attributo src e alt:

const nuovaImmagine = document.createElement("img");
nuovaImmagine.src = "path/immagine.jpg";
nuovaImmagine.alt = "Descrizione dell'immagine";
document.body.appendChild(nuovaImmagine);

Esercizio 4

Creare un nuovo elemento `ul` e aggiungere una lista di elementi `li` ad esso:

const nuovaLista = document.createElement("ul");
const elementiLista = ["Elemento 1", "Elemento 2", "Elemento 3"];

elementiLista.forEach(function (testoElemento) {
  const nuovoElemento = document.createElement("li");
  nuovoElemento.textContent = testoElemento;
  nuovaLista.appendChild(nuovoElemento);
});

document.body.appendChild(nuovaLista);

Esercizio 5

Creare un nuovo elemento `a` con un link e impostare l'attributo href:

const nuovoLink = document.createElement("a");
nuovoLink.href = "https://www.example.com";
nuovoLink.textContent = "Visita il sito web";
document.body.appendChild(nuovoLink);

Esercizio 6

Creare un nuovo elemento `input` di tipo testo e aggiungerlo a un modulo:

const nuovoInput = document.createElement("input");
nuovoInput.type = "text";
const modulo = document.getElementById("modulo");
modulo.appendChild(nuovoInput);

Esercizio 7

Creare un nuovo elemento `button` e aggiungere un gestore di eventi per il click:

const nuovoPulsante = document.createElement("button");
nuovoPulsante.textContent = "Clicca qui";
nuovoPulsante.addEventListener("click", function () {
  console.log("Il pulsante è stato cliccato");
});
document.body.appendChild(nuovoPulsante);

Esercizio 8

Creare una nuova tabella `table` con righe `tr` e colonne `td`:

const nuovaTabella = document.createElement("table");

for (let i = 0; i < 3; i++) {
  const nuovaRiga = document.createElement("tr");

  for (let j = 0; j < 3; j++) {
    const nuovaColonna = document.createElement("td");
    nuovaColonna.textContent = `Riga ${i + 1}, Colonna ${j + 1}`;
    nuovaRiga.appendChild(nuovaColonna);
  }

  nuovaTabella.appendChild(nuovaRiga);
}

document.body.appendChild(nuovaTabella);

Esercizio 9

Creare un nuovo elemento `select` con opzioni `option`:

const nuovoSelect = document.createElement("select");
const opzioni = ["Opzione 1", "Opzione 2", "Opzione 3"];

opzioni.forEach(function (testoOpzione) {
  const nuovaOpzione = document.createElement("option");
  nuovaOpzione.textContent = testoOpzione;
  nuovoSelect.appendChild(nuovaOpzione);
});

document.body.appendChild(nuovoSelect);

Esercizio 10

Creare un nuovo elemento `textarea` e impostarne il valore predefinito:

const nuovaAreaTesto = document.createElement("textarea");
nuovaAreaTesto.value = "Questo è il testo predefinito";
document.body.appendChild(nuovaAreaTesto);