Document HTML DOM createDocumentFragment()
Exemples
Ajouter des éléments à une liste vide :
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);
Ajouter des éléments à une liste existante :
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);
Définition et utilisation
La createDocumentFragment()méthode crée un nœud hors écran.
Le nœud hors écran peut être utilisé pour créer un nouveau fragment de document qui peut être inséré dans n'importe quel document.
La createDocumentFragment()méthode peut également être utilisée pour extraire des parties d'un document, modifier, ajouter ou supprimer une partie du contenu et l'insérer à nouveau dans le document.
Noter
Vous pouvez toujours modifier directement les éléments HTML. Mais une meilleure méthode consiste à construire un fragment de document (hors écran) et à attacher ce fragment au DOM réel (en direct) lorsqu'il est prêt. Étant donné que vous insérez le fragment lorsqu'il est prêt, il n'y aura qu'une seule redistribution et un seul rendu.
Si vous souhaitez ajouter des éléments d'éléments HTML dans une boucle, l'utilisation de fragments de document améliore également les performances.
Avertissement!
Les nœuds de document ajoutés au fragment de document sont supprimés du document d'origine.
Syntaxe
document.createDocumentFragment()
Paramètres
| RIEN |
Valeur de retour
| Taper | La description |
| Nœud | Le nœud DocumentFragment créé. |
Prise en charge du navigateur
document.createComment() est une fonctionnalité DOM niveau 1 (1998).
Il est entièrement pris en charge dans tous les navigateurs :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |