Corso raccomandato:

Metodo HTML DOM Document createDocumentFragment()

I nodi offscreen possono essere utilizzati per costruire nuovi frammenti di documento che possono essere inseriti in qualsiasi documento. Definizione e uso

Il metodo crea un nodo offscreen.

I nodi offscreen possono essere utilizzati per costruire nuovi frammenti di documento che possono essere inseriti in qualsiasi documento. createDocumentFragment()

Il metodo può anche essere utilizzato per estrarre parti di contenuto del documento, modificare, aggiungere o eliminare determinati contenuti e riinserire il contenuto nel documento.

Suggerimento

Si può sempre modificare direttamente l'elemento HTML. Ma un metodo migliore è costruire (offscreen) un frammento di documento e aggiungere questo frammento al DOM reale (attivo) quando è pronto. Poiché si inserisce il frammento quando è pronto, ci sarà solo una singola ridimensionatura e una singola renderizzazione.

Se si desidera aggiungere elementi HTML in un ciclo, l'uso del frammento di documento può migliorare le prestazioni.Attenzione:

Il nodo documento aggiunto al frammento di documento verrà rimosso dal documento originale.

Esempio

Esempio 1

Aggiungi l'elemento a una lista esistente:
const fruits = ["Banana", "Orange", "Mango"];
// Crea il frammento di documento:
const dFrag = document.createDocumentFragment();
// Aggiungi l'elemento li al frammento:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Aggiungi il frammento al elenco:

document.getElementById('myList').appendChild(dFrag);

Aggiungi l'elemento a una lista vuota:

Esempio 2

Aggiungi l'elemento a una lista esistente:
const fruits = ["Banana", "Orange", "Mango"];
// Crea il frammento di documento:
const dFrag = document.createDocumentFragment();
// Aggiungi l'elemento li al frammento:
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Aggiungi il frammento al elenco:

document.getElementById('myList').appendChild(dFrag);

Prova tu stesso

Sintassi

document.createDocumentFragment()

Parametro

Nessuno.

Tipo Descrizione
Nodo Il nuovo nodo DocumentFragment creato, senza nodi figli.

Supporto del browser

document.createComment() È una caratteristica del DOM Level 1 (1998).

Tutti i browser lo supportano:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto 9-11 Supporto Supporto Supporto Supporto