JavaScript Academy · Lezione

Creare e inserire elementi

Crei nuovi nodi con createElement e append.

Creare e inserire elementi è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Creare nuovi elementi

Anziché scrivere stringhe HTML, è possibile costruire gli elementi nel codice. Questo evita gli attacchi XSS e fornisce un riferimento a un elemento reale da configurare.

createElement

document.createElement crea un nuovo elemento scollegato dal DOM. Esiste in memoria, ma non è ancora presente nella pagina.

const li = document.createElement("li");
li.textContent = "New item";

Configurare prima dell'inserimento

Imposti classi, attributi e contenuto mentre l'elemento è ancora scollegato. Diventa visibile solo quando lo inserisce.

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

append aggiunge nodi (o stringhe) come ultimi figli di un elemento. Può ricevere più argomenti.

const list = document.querySelector("ul");
list.append(li);

prepend

prepend inserisce i nodi come primi figli, spostando verso il basso quelli già presenti.

list.prepend(document.createElement("li"));

append accetta stringhe

A differenza del metodo precedente appendChild, append può ricevere stringhe semplici e più argomenti contemporaneamente.

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

appendChild è il metodo classico. Accetta un solo nodo e lo restituisce, mentre append restituisce undefined.

const node = list.appendChild(document.createElement("li"));

insertBefore

insertBefore posiziona un nuovo nodo prima di uno specifico figlio già presente, consentendo un posizionamento preciso.

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

insertAdjacentElement inserisce un elemento in relazione a un altro, utilizzando posizioni come beforebegin, afterbegin, beforeend e afterend.

ref.insertAdjacentElement("beforebegin", li);

DocumentFragment per inserimenti in blocco

Quando aggiunge molti elementi, li costruisca prima in un DocumentFragment, quindi lo inserisca una sola volta. In questo modo riduce al minimo i reflow e ottiene prestazioni migliori.

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

cloneNode(true) copia un elemento e i suoi discendenti, risultando utile per creare strutture ripetute a partire da un modello.

const copy = li.cloneNode(true);
list.append(copy);

Verifica rapida

Scelga la tecnica migliore.

Riepilogo

Utilizzi createElement per costruire elementi scollegati, configurarli e poi inserirli con append/prepend (che consentono stringhe e più argomenti), appendChild (un solo nodo) oppure insertBefore/insertAdjacentElement per posizioni precise. Per molti inserimenti, utilizzi un DocumentFragment, e riutilizzi le strutture con cloneNode(true).

Domande Frequenti

La lezione «Creare e inserire elementi» è gratuita?

Sì — il testo completo di «Creare e inserire elementi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Creare e inserire elementi»?

Crei nuovi nodi con createElement e append. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Creare e inserire elementi»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy