Recommandation de cours :

Méthode HTML DOM Document createDocumentFragment()

Les nœuds offscreen peuvent être utilisés pour construire un DocumentFragment nouveau qui peut être inséré dans n'importe quel document. Définition et utilisation

Cette méthode crée un nœud offscreen.

Les nœuds offscreen peuvent être utilisés pour construire un DocumentFragment nouveau qui peut être inséré dans n'importe quel document. createDocumentFragment()

Cette méthode peut également être utilisée pour extraire une partie du contenu du document, modifier, ajouter ou supprimer certains contenus, et les insérer à nouveau dans le document.

Avis

Vous pouvez toujours éditer directement les éléments HTML. Mais une meilleure méthode consiste à construire (offscreen) un DocumentFragment et à l'ajouter au DOM réel (actif) lorsque vous êtes prêt. Comme vous insérez le fragment après qu'il est prêt, vous n'aurez qu'une seule réorganisation et une seule rendu.

Si vous souhaitez ajouter des éléments HTML dans une boucle, l'utilisation d'un DocumentFragment peut également améliorer les performances.Remarque :

Les nœuds de document ajoutés au DocumentFragment seront supprimés du document original.

Instance

Exemple 1

Ajoutez des éléments à une liste existante :
const fruits = ["Banana", "Orange", "Mango"];
// Créez un fragment de document :
const dFrag = document.createDocumentFragment();
// Ajoutez l'élément li à la fragment :
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Ajoutez le fragment à la liste :

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

Ajoutez des éléments à une liste vide :

Exemple 2

Ajoutez des éléments à une liste existante :
const fruits = ["Banana", "Orange", "Mango"];
// Créez un fragment de document :
const dFrag = document.createDocumentFragment();
// Ajoutez l'élément li à la fragment :
  for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Ajoutez le fragment à la liste :

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

Essayez-le vous-même

Syntaxe

document.createDocumentFragment()

Paramètres

Aucun.

Type Description
Nœud Un DocumentFragment de nouveau création, sans nœuds enfants.

Support du navigateur

document.createComment() C'est une caractéristique du niveau DOM 1 (1998).

Tous les navigateurs le supportent :

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