Modificare il documento | W3docs JavaScript Tutorial

JavaScript ti permette di modificare una pagina dopo che è stata caricata: aggiungere nuovi elementi, spostarli, aggiornare testo, cambiare attributi e rimuovere ciò di cui l'utente non ha più bisogno. Questa è la base di ogni interfaccia dinamica — dal mostrare un messaggio di validazione al renderizzare un intero elenco di risultati di ricerca.

Questa pagina illustra il toolkit pratico per modificare il DOM: creare e inserire nodi, la differenza tra textContent e innerHTML, l'inserimento rapido di HTML con insertAdjacentHTML, la rimozione e la sostituzione di nodi, e l'uso di un DocumentFragment per mantenere gli aggiornamenti veloci. Per trovare prima gli elementi da modificare, consulta Ricerca: getElement* e querySelector*. Per avere un quadro più ampio di come la pagina è strutturata come albero di nodi, consulta Comprendere i nodi del DOM.

Creare nuovi nodi

Prima di poter inserire qualcosa nella pagina, è necessario crearlo. Esistono due mattoni fondamentali: i nodi elemento (<div>, <li>, …) e i nodi di testo (testo semplice).

Creare elementi

I nuovi elementi vengono creati con il metodo document.createElement(tag). L'elemento esiste solo in memoria finché non viene inserito nel documento — fino ad allora l'utente non vede nulla. Ecco come creare un div e aggiungerlo alla pagina:

<body></body>
<script>
  let div = document.createElement('div');
  div.innerHTML = "Hello, world!";
  document.body.appendChild(div);
</script>

Provalo tu stesso »

L'elemento appare solo una volta che appendChild (o un altro metodo di inserimento) lo collega a un nodo già presente nel documento.

Creare nodi di testo

Per aggiungere testo semplice, usa document.createTextNode(text). A differenza di innerHTML, un nodo di testo tratta il suo contenuto in modo letterale — <b> rimane i caratteri <b> invece di diventare un tag grassetto. Questo rende i nodi di testo la scelta sicura quando il testo proviene da un utente o da qualsiasi fonte non attendibile:

<body>
  <div id="container"></div>
</body>
<script>
  const div = document.getElementById("container");
  let textNode = document.createTextNode('Here is some text');
  div.appendChild(textNode);
</script>

Provalo tu stesso »

Inserire nodi

Una volta che un nodo esiste, è necessario collocarlo da qualche parte. Il metodo classico è parent.appendChild(node), che aggiunge il nodo come ultimo figlio. I browser moderni forniscono anche una famiglia di metodi più flessibili che accettano sia nodi che stringhe:

Metodo	Dove inserisce
`node.append(...)`	Alla fine, all'interno di `node`
`node.prepend(...)`	All'inizio, all'interno di `node`
`node.before(...)`	Immediatamente prima di `node`
`node.after(...)`	Immediatamente dopo `node`
`node.replaceWith(...)`	Sostituisce completamente `node`

Qui append e prepend aggiungono elementi di lista alle estremità opposte di un <ul>:

<body>
  <ul id="list">
    <li>middle</li>
  </ul>
</body>
<script>
  const list = document.getElementById("list");

  const first = document.createElement("li");
  first.textContent = "first";
  list.prepend(first);

  const last = document.createElement("li");
  last.textContent = "last";
  list.append(last);
</script>

insertAdjacentHTML

Quando si vuole inserire una stringa di HTML in posizione relativa rispetto a un elemento — senza disturbare il contenuto esistente — element.insertAdjacentHTML(position, html) è lo strumento giusto. L'argomento position è una delle quattro parole chiave:

"beforebegin" — prima dell'elemento stesso
"afterbegin" — all'interno, prima del primo figlio
"beforeend" — all'interno, dopo l'ultimo figlio
"afterend" — dopo l'elemento stesso

<body>
  <div id="box">existing content</div>
</body>
<script>
  const box = document.getElementById("box");
  box.insertAdjacentHTML("beforeend", "<p>added inside, at the end</p>");
  box.insertAdjacentHTML("afterend", "<p>added after the box</p>");
</script>

Poiché insertAdjacentHTML analizza una stringa HTML, non passare mai input non attendibile — si applicano gli stessi rischi XSS di innerHTML. Esistono metodi fratelli insertAdjacentText e insertAdjacentElement per inserire testo semplice o un nodo esistente nelle stesse posizioni.

textContent vs innerHTML

Entrambe le proprietà impostano il contenuto di un elemento, ma si comportano in modo molto diverso:

innerHTML analizza la stringa come HTML. el.innerHTML = "<b>Hi</b>" produce un nodo in grassetto. Assegnarle un valore sostituisce tutti i figli esistenti.
textContent tratta la stringa come testo semplice. el.textContent = "<b>Hi</b>" mostra i caratteri letterali <b>Hi</b>.

Preferisci textContent ogni volta che inserisci testo — è più veloce e immune all'iniezione HTML/script. Ricorri a innerHTML solo quando hai genuinamente bisogno di markup e la fonte è attendibile.

<body>
  <div id="asHtml"></div>
  <div id="asText"></div>
</body>
<script>
  const input = "<b>3 < 5</b>";
  document.getElementById("asHtml").innerHTML = input;   // renders bold text
  document.getElementById("asText").textContent = input; // shows the literal markup
</script>

Modificare gli elementi

Cambiare gli attributi

Per cambiare un attributo di un elemento, puoi usare element.setAttribute(name, value). Questo metodo consente di impostare il valore di un attributo sull'elemento specificato.

<body>
  <div id="firstID"></div>
  <div>new id is: <span id="result"></span></div>
</body>
<script>
  const div = document.getElementById("firstID");
  const result = document.getElementById("result");
  
  div.setAttribute("id", "newDiv");
  result.innerHTML = div.id;
</script>

Provalo tu stesso »

Per un approfondimento sulla distinzione tra attributi HTML e proprietà DOM (e quando usare setAttribute rispetto all'accesso diretto alla proprietà come el.id = "..."), consulta Attributi e proprietà.

Manipolazioni avanzate

Clonare elementi

Puoi creare una copia di un elemento usando il metodo element.cloneNode(deep). Impostando deep su true si clona l'elemento e i suoi discendenti.

<body>
  <div id="mydiv">one div here, or two divs if cloned! <span>And here is a span inside the div!</span></div>
</body>
<script>
  const div = document.getElementById("mydiv");
  const clone = div.cloneNode(true);
  document.body.appendChild(clone);
</script>

Provalo tu stesso »

Sostituire elementi

Per scambiare un nodo con un altro, chiama element.replaceWith(newNode). Il vecchio nodo lascia il documento e quello nuovo prende il suo posto:

<body>
  <p id="old">I will be replaced.</p>
</body>
<script>
  const old = document.getElementById("old");
  const fresh = document.createElement("p");
  fresh.textContent = "I am the replacement.";
  old.replaceWith(fresh);
</script>

Rimuovere elementi

Per rimuovere un elemento dal DOM, puoi usare element.remove().

<body>
  <div>It's the only thing you see, as the next div is removed!</div>
  <div id="mydiv">you don't see me if I'm removed!</div>
</body>
<script>
  const div = document.getElementById("mydiv");
  div.remove();
</script>

Provalo tu stesso »

Raggruppare gli aggiornamenti con un DocumentFragment

Ogni volta che inserisci un nodo nel documento attivo, il browser può ricalcolare il layout. Inserire molti nodi in un ciclo, uno alla volta, può quindi essere lento. Un DocumentFragment è un contenitore leggero e fuori schermo: assembli tutti i tuoi nodi al suo interno, poi inserisci il frammento una sola volta. Solo i suoi figli finiscono nel DOM — il frammento stesso scompare.

<body>
  <ul id="list"></ul>
</body>
<script>
  const list = document.getElementById("list");
  const fragment = document.createDocumentFragment();

  for (let i = 1; i <= 5; i++) {
    const li = document.createElement("li");
    li.textContent = "Item " + i;
    fragment.appendChild(li);
  }

  // One single insertion into the live document
  list.appendChild(fragment);
</script>

Per altri modi per mantenere efficienti gli aggiornamenti del DOM, consulta Ottimizzazione delle prestazioni del DOM. Se il tuo markup è riutilizzabile, l'elemento <template> è un altro modo rapido per clonare strutture già pronte.

Esempio pratico: costruire una lista di cose da fare

Applichiamo questi concetti per creare una semplice lista di cose da fare con JavaScript:

<body></body>
<script>
// Creating the list container
let list = document.createElement('ul');
document.body.appendChild(list);

// Adding items to the list
function addItem(text) {
    let item = document.createElement('li');
    item.textContent = text;
    list.appendChild(item);
}

addItem('Learn JavaScript');
addItem('Build a to-do list');
</script>

Provalo tu stesso »

Conclusione

Modificare il documento è il cuore di ogni interfaccia dinamica: crea nodi con createElement/createTextNode, posizionali con append/prepend/before/after o insertAdjacentHTML, scegli textContent per il testo sicuro e innerHTML solo per il markup attendibile, e usa un DocumentFragment per mantenere veloci gli aggiornamenti in blocco. Usa replaceWith e remove per sostituire o eliminare nodi.

Per approfondire, esplora Manipolazione del DOM per una panoramica più ampia, Traversare il DOM per spostarti tra nodi correlati, e Proprietà dei nodi: tipo, tag e contenuto per capire cosa contiene ciascun nodo.

Esercitazione

Pratica

Quale metodo si può usare in JavaScript per cambiare un attributo di un elemento?

`element.setAttribute('id', 'newDiv')``element.modifyAttribute('id', 'newDiv')``element.changeAttribute('id', 'newDiv')``element.updateAttribute('id', 'newDiv')`