JavaScript Academy · Lezione

Modificare testo e contenuto HTML

Aggiorni il contenuto con textContent e innerHTML.

Modificare testo e contenuto HTML è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Leggere e scrivere testo

Per modificare ciò che un elemento visualizza, è possibile impostarne il testo o l'HTML. La scelta corretta dipende dalla necessità di usare il markup e dal livello di affidabilità dei dati.

textContent

textContent legge o imposta il testo non elaborato di un elemento. Impostandolo, sostituisce tutti i figli con un singolo nodo di testo e tratta l'input come testo semplice.

const el = document.querySelector("#status");
el.textContent = "Saved!";

textContent esegue l'escape del markup

Poiché si tratta di testo semplice, qualsiasi codice HTML nella stringa viene mostrato letteralmente, non analizzato. Questo protegge dagli attacchi di injection.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

innerHTML legge o imposta il markup HTML contenuto in un elemento. Impostandolo, la stringa viene analizzata come HTML e vengono creati nodi reali.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

innerHTML sostituisce tutto

Assegnare un valore a innerHTML elimina i figli esistenti e ricostruisce il sottoalbero a partire dal nuovo markup.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

Il pericolo XSS

Non inserisca mai input utente non attendibile in innerHTML. Una stringa dannosa può iniettare script o gestori di eventi: una vulnerabilità chiamata XSS.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

innerText è simile a textContent, ma tiene conto degli stili: riflette il testo visualizzato e ignora gli elementi nascosti.

console.log(el.innerText); // visible text only

textContent e innerText

textContent restituisce tutto il testo, compresi i contenuti nascosti, ed è più veloce perché non attiva il layout. innerText tiene conto del layout ed è più lento.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

Aggiungere testo in sicurezza

Per aggiungere testo senza eliminare i nodi esistenti, crei un nodo di testo oppure usi insertAdjacentText invece di sovrascrivere textContent.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

Inserire HTML senza rianalizzarlo

insertAdjacentHTML aggiunge il markup in una posizione senza rianalizzare l'intero elemento, risultando più efficiente della ricostruzione di innerHTML.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

Scegliere la proprietà giusta

Usi textContent per il testo semplice, come scelta predefinita sicura, innerHTML solo con markup attendibile e innerText quando le servono specificamente testo visualizzato e visibile.

Verifica rapida

Scelga l'approccio sicuro.

Riepilogo

textContent imposta testo semplice con l'escape del markup ed è la scelta predefinita sicura. innerHTML analizza il markup, ma espone al rischio XSS con input non attendibile. innerText riflette solo il testo visibile e visualizzato. Per aggiungere contenuti, preferisca insertAdjacentHTML/insertAdjacentText alla sovrascrittura dell'intero elemento.

Domande Frequenti

La lezione «Modificare testo e contenuto HTML» è gratuita?

Sì — il testo completo di «Modificare testo e contenuto HTML» è 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 «Modificare testo e contenuto HTML»?

Aggiorni il contenuto con textContent e innerHTML. 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 1 di 4.

Quanto tempo richiede la lezione «Modificare testo e contenuto HTML»?

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