Documento HTML DOM createDocumentFragment()
Esempi
Aggiungi elementi a un elenco vuoto:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
Aggiungi elementi a un elenco esistente:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
Definizione e utilizzo
Il createDocumentFragment()
metodo crea un nodo fuori schermo.
Il nodo fuori schermo può essere utilizzato per creare un nuovo frammento di documento che può essere inserito in qualsiasi documento.
Il createDocumentFragment()
metodo può essere utilizzato anche per estrarre parti di un documento, modificare, aggiungere o eliminare parte del contenuto e reinserirlo nel documento.
Nota
Puoi sempre modificare direttamente gli elementi HTML. Ma un modo migliore è costruire un frammento di documento (fuori schermo) e allegare questo frammento al DOM reale (live) quando è pronto. Poiché inserisci il frammento quando è pronto, ci sarà solo un reflow e un singolo rendering.
Se desideri aggiungere elementi di elementi HTML in un ciclo, l'utilizzo di frammenti di documento migliora anche le prestazioni.
Avvertimento!
I nodi del documento aggiunti al frammento del documento vengono rimossi dal documento originale.
Sintassi
document.createDocumentFragment()
Parametri
NESSUNO |
Valore di ritorno
Tipo | Descrizione |
Nodo | Il nodo DocumentFragment creato. |
Supporto browser
document.createComment()
è una funzionalità DOM di livello 1 (1998).
È completamente supportato in tutti i browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |