Document : méthode createDocumentFragment()

Syntaxe

createDocumentFragment()

Paramètres

Aucun.

Valeur de retour

Un objet DocumentFragment nouvellement créé et vide, prêt à recevoir des nœuds.

Description

Les objets DocumentFragment sont des objets Node du DOM qui ne font jamais partie de l'arbre DOM principal. Le cas d'utilisation habituel consiste à créer le fragment de document, à y ajouter des éléments, puis à ajouter le fragment de document à l'arbre DOM. Dans l'arbre DOM, le fragment de document est remplacé par tous ses enfants.

Étant donné que le fragment de document est en mémoire et ne fait pas partie de l'arbre DOM principal, l'utilisation de fragments de document peut entraîner une meilleure performance ^(angl.) dans certains anciens moteurs.

Vous pouvez également utiliser le constructeur DocumentFragment pour créer un nouveau fragment :

const fragment = new DocumentFragment();

Exemples

Cet exemple crée une liste des principaux navigateurs du web dans un DocumentFragment, puis ajoute le nouveau sous-arbre DOM au document pour l'afficher.

HTML

<ul id="ul"></ul>

JavaScript

const element = document.getElementById("ul"); // en supposant qu'ul existe
const fragment = document.createDocumentFragment();
const navigateurs = ["Firefox", "Chrome", "Opera", "Safari"];

navigateurs.forEach((navigateur) => {
  const li = document.createElement("li");
  li.textContent = navigateur;
  fragment.appendChild(li);
});

element.appendChild(fragment);

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La méthode document.implementation.createDocument()
• L'interface DocumentFragment