Esercizi JavaScript sul dom

Esercizio 1

Creare dinamicamente una lista HTML utilizzando JavaScript e il DOM, senza scrivere gli elementi <li> direttamente nell’HTML.

La lista dovrà essere come questa:

• spotify
• whatsapp
• instagram

Istruzioni:

• La lista dovrà essere popolata con questi elementi dell'array: app = ["spotify", "whatsapp", "instagram"].
• Utilizzate un ciclo for o foreach.
• Aggiungete una classe alla lista
• Appendete la lista all'interno di un paragrafo

Esercizio 2

Creare dinamicamente elementi <p> nella pagina utilizzando JavaScript, ogni volta che l’utente preme il pulsante Invio con il contenuto inserito in una casella di input.

Nel file HTML sono presenti:

• un input con id input-todo
• un bottone con id pulsante

Istruzioni:

Quando l’utente preme il pulsante:

• creare un elemento <p> tramite document.createElement
• inserire nel paragrafo il testo scritto nell’input
• assegnare al paragrafo un colore (es. lightblue)
• aggiungere il paragrafo al document.body

Soluzioni

Esercizio 1

let paragrafo = document.getElementById("paragrafo");
let lista = document.createElement("ul");

lista.classList.add("classe-llista");

let app = ["spotify", "whatsapp", "instagram"];

for (let i = 0; i < app.length; i++) {
    let li = document.createElement("li");
    li.textContent = app[i];
    lista.appendChild(li);
}

paragrafo.appendChild(lista);

Provalo tu:

Esercizio 2

let pulsante = document.getElementById("pulsante");
let input = document.getElementById("input-todo");

pulsante.addEventListener("click", function (){
    let par = document.createElement("p");
    par.style.color = "lightblue";
    par.textContent = input.value;
    document.body.appendChild(par);
});