Crée un nouvel objet vide de type DocumentFragment.

Syntaxe

var fragment = document.createDocumentFragment();

fragment est une référence vers un objet vide de type DocumentFragment .

Description

Les objets DocumentFragments sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.

Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de reflow (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une amélioration des performances.

Exemple

Cet exemple crée une liste des principaux navigateurs du web.

HTML

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

JavaScript

var element  = document.getElementById('ul'); // en supposant qu'ul existe
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 
    'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {
    var li = document.createElement('li');
    li.textContent = browser;
    fragment.appendChild(li);
});

element.appendChild(fragment);

Résultat

Spécification

Spécification Statut Commentaire
DOM
La définition de 'Document.createDocumentFragment()' dans cette spécification.
Standard évolutif Définition initiale dans la spécification DOM 1.

Compatibilité des navigateurs

 
Fonctionnalité Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
  
Fonctionnalité Firefox Mobile (Gecko) Android Edge IE Mobile Opera Mobile Safari Mobile
Basic support ? ? (Oui) ? ? ?

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : loella16, JNa0, P45QU10U, fscholz, jsx, AshfaqHossain, teoli, jdvauguet
 Dernière mise à jour par : loella16,