Méthode jQuery.append() : intégrer des éléments à l’arborescence DOM

La méthode jQuery.append() permet de simplifier des tâches complexes : création de listes dynamiques, ajout d’éléments sur le formulaire, chargement de contenus supplémentaires à l’aide des méthodes AJAX… Découvrez avec nous la syntaxe de cette méthode, ainsi que son fonctionnement.

Méthode jQuery.append() : de quoi s’agit-il ?

La fonction jQuery.append() appartient à la bibliothèque jQuery et permet d’ajouter du contenu dynamique à l’arborescence DOM (Document Object Model). Cette méthode vous permet d’ajouter de nouveaux éléments ou de nouvelles structures à la fin d’un objet donné. La méthode .append() de jQuery offre de nombreuses possibilités et peut être associée à d’autres fonctions jQuery, notamment jQuery.removeClass() ou jQuery.on(). Avec ces options, vous avez donc l’embarras du choix pour faire évoluer votre arborescence DOM de façon dynamique. Il convient également de préciser que le framework jQuery pour WordPress peut être intégré très facilement et que celui-ci vous permet d’utiliser des fonctionnalités spéciales et de mettre en place des éléments interactifs dans votre système de gestion de contenu (ou CMS, pour Content Management System).

À quoi ressemblent la syntaxe et les paramètres de la méthode jQuery.append() ?

La méthode jQuery.append() peut être structurée avec deux paramètres :

$(selector).append(content, function(index, html));

• content : il s’agit du contenu qui doit être ajouté ;
• function(index, html) : il s’agit du paramètre appelé après l’ajout du contenu ;
  • index : il s’agit de l’index de l’élément dans l’ensemble des objets sélectionnés ;
  • html : il s’agit du contenu HTML de l’élément.

Le paramètre selector peut correspondre à n’importe quelle sélection CSS valide pour identifier l’élément cible voulu. Les sélecteurs jQuery sont par exemple des ID (#id), des classes (.class) ou des noms d’éléments (tels que div).

content peut correspondre à une chaîne de caractères (texte), à du code HTML ou à un élément DOM déjà existant. Vous transmettez une chaîne de caractères ? Alors celle-ci sera ajoutée en tant que contenu texte de l’élément. Vous utilisez du code HTML ? Alors celui-ci sera interprété et inséré comme une nouvelle structure pour l’élément. Vous faites appel à un élément DOM existant ? La méthode .append() le rattachera à l’objet cible.

Exemples d’application de la méthode jQuery.append()

Dans le cadre des exemples ci-dessous, nous allons illustrer pour vous l’utilisation de la méthode .append() de jQuery.

jQuery.append() pour HTML

L’exemple suivant concerne l’ajout de structures HTML : 0

$("header").append("<div><p>Nouveau contenu</p></div>");

La méthode jQuery.append() div permet d’ajouter un conteneur avec un paragraphe à la fin de l’élément « header ».

jQuery.append() pour éléments DOM

Pour ajouter des éléments DOM, la marche à suivre est similaire :

var newElement = $("<div><p>Nouveau contenu</p></div>");
$("header").append(newElement);

jQuery.append() avec fonction de rappel

À l’aide d’une fonction de rappel, vous pouvez exécuter certaines actions après avoir ajouté du contenu ou accéder à l’élément que vous venez de créer, voire à ses propriétés.

$("div#container").append("<p>Premier élément</p><p>Deuxième élément</p><p>Troisième élément</p>", function(index, html) {
    console.log("Élément ajouté : " + html);
    console.log("Index de l’élément : " + index);
});

Vous obtenez alors le résultat suivant :

Élément ajouté : <p>Premier élément</p>
Index de l’élément : 0
Élément ajouté : <p>Deuxième élément</p>
Index de l’élément : 1
Élément ajouté : <p>Troisième élément</p>
Index de l’élément : 2

Dans cet exemple, la méthode jQuery.append() associe trois balises <p> à l’élément : « Premier élément », « Deuxième élément » et « Troisième élément », et ce, de manière simultanée après div et avec l’ID container. La fonction de rappel est utilisée chaque fois qu’un objet est ajouté. Elle renvoie le contenu HTML de chacun d’eux, ainsi que l’index correspondant à la console.