liste des fonctions GD
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
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