oujood.com

DOM HTML La méthode createDocumentFragment()

La méthode createDocumentFragment() crée un objet de nœud imaginaire, avec toutes les propriétés et les méthodes de l'objet de nœud.
.....

chercher |

Définition et utilisation méthode createDocumentFragment()

JavaScript cours tutorial

La méthode createDocumentFragment() est une méthode de l'interface Document qui permet de créer un fragment de document vide dans lequel on peut ajouter des éléments HTML ou du contenu texte.
Le fragment de document ainsi créé peut être utilisé comme un conteneur temporaire pour ajouter des éléments à un document HTML. Ces éléments peuvent être ajoutés au fragment de document en utilisant les méthodes appendChild() ou insertBefore().

La méthode createDocumentFragment() est utile lorsque vous souhaitez extraire des parties de votre document, modifier, ajouter, ou supprimer, le contenu et l'insérer dans votre document.

Vous pouvez également utiliser l'objet  Document pour effectuer ces changements, mais pour éviter de détruire la structure du document, il peut être plus sûr d'extraire seulement des parties du document, faire les changements et insérer la partie dans le document.

Remarque : Les nœuds étant annexées au fragment de document, dans le document, seront retirés du document.


Voici un exemple d'utilisation de la méthode createDocumentFragment() :

Exemple       Copier le code

// Création d'un fragment de document vide
let fragment = document.createDocumentFragment();

// Création de quelques éléments HTML
let h1 = document.createElement('h1');
h1.textContent = 'Titre';
let p = document.createElement('p');
p.textContent = 'Paragraphe';

// Ajout des éléments au fragment de document
fragment.appendChild(h1);
fragment.appendChild(p);

// Ajout du fragment de document à la page HTML
let container = document.getElementById('container');
container.appendChild(fragment);
Cet exemple crée un fragment de document vide, puis crée deux éléments HTML h1 et p et les ajoute au fragment de document. Enfin, le fragment de document est ajouté à un élément de la page HTML en utilisant la méthode appendChild().

L'utilisation de la méthode createDocumentFragment() peut être utile dans les cas où il faut ajouter plusieurs éléments à un document HTML en une seule fois. Cela permet d'éviter d'avoir à ajouter chaque élément séparément, ce qui peut être plus lent et nécessiter plus de ressources. En utilisant un fragment de document, on peut ajouter tous les éléments en une seule fois en ajoutant le fragment de document au document principal.

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La méthode createDocumentFragment() est prise en charge dans tous les principaux navigateurs.

Syntaxe

document.createDocumentFragment()

Exemple Créer un nœud documentFragment et lui ajouter un enfant (un élément de liste). Puis, modifiez la valeur du nœud de l'élément de liste et l'insérer comme dernier enfant de la liste :

Exemple       Copier le code

  <!doctype html>
  <html lang="fr">
  <head>
           <meta charset="UTF-8">
           <title> Exemple modifier un élément de liste, à l'aide de la méthode
  createDocumentFragment </title>
  </head>
  <body>
  <ul><li>Espagne</li><li>France</li><li>Allemagne</li></ul>
  <p id="dmo"> cliquez sur le bouton pour modifier un élément de liste, à l'aide
  de la méthode createDocumentFragment, puis  ajouter l'élément de liste comme  dernier
  enfant de la liste.</p>
  <button onclick="maFonction()"> Voir </button>
  <script>
  function maFonction()
  {
  var F=document.createDocumentFragment();
  F.appendChild(document.getElementsByTagName("LI")[0]);
  F.childNodes[0].childNodes[0].nodeValue="Portugal";
  document.getElementsByTagName("UL")[0].appendChild(F);
  };
  </script>
  </body>
  </html>
 
Par carabde 30 mars 2014



Voir aussi nos tutoriel :

Balise a anchor

Définit un lien hypertexte

Les ellipses et cercles

Les ellipses et cercles

Balise select

Définit une liste déroulante