Méthode jQuery.append() : intégrer des éléments à l’ar­bo­res­cence DOM

La méthode jQuery.append() permet de sim­pli­fier des tâches complexes : création de listes dy­na­miques, ajout d’éléments sur le for­mu­laire, char­ge­ment de contenus sup­plé­men­taires à l’aide des méthodes AJAX… Découvrez avec nous la syntaxe de cette méthode, ainsi que son fonc­tion­ne­ment.

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

La fonction jQuery.append() ap­par­tient à la bi­blio­thèque jQuery et permet d’ajouter du contenu dynamique à l’ar­bo­res­cence DOM (Document Object Model). Cette méthode vous permet d’ajouter de nouveaux éléments ou de nouvelles struc­tures à la fin d’un objet donné. La méthode .append() de jQuery offre de nom­breuses pos­si­bi­li­tés et peut être associée à d’autres fonctions jQuery, notamment jQuery.re­mo­ve­Class() ou jQuery.on(). Avec ces options, vous avez donc l’embarras du choix pour faire évoluer votre ar­bo­res­cence DOM de façon dynamique. Il convient également de préciser que le framework jQuery pour WordPress peut être intégré très fa­ci­le­ment et que celui-ci vous permet d’utiliser des fonc­tion­na­li­tés spéciales et de mettre en place des éléments in­te­rac­tifs dans votre système de gestion de contenu (ou CMS, pour Content Ma­na­ge­ment System).

À quoi res­semblent la syntaxe et les pa­ra­mètres de la méthode jQuery.append() ?

La méthode jQuery.append() peut être struc­tu­rée avec deux pa­ra­mè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é­lec­tion­nés ;
  • html : il s’agit du contenu HTML de l’élément.

Le paramètre selector peut cor­res­pondre à n’importe quelle sélection CSS valide pour iden­ti­fier l’élément cible voulu. Les sé­lec­teurs jQuery sont par exemple des ID (#id), des classes (.class) ou des noms d’éléments (tels que div).

content peut cor­res­pondre à une chaîne de ca­rac­tères (texte), à du code HTML ou à un élément DOM déjà existant. Vous trans­met­tez une chaîne de ca­rac­tè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 in­ter­pré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 rat­ta­chera à l’objet cible.

Exemples d’ap­pli­ca­tion de la méthode jQuery.append()

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

jQuery.append() pour HTML

L’exemple suivant concerne l’ajout de struc­tures HTML : 0

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

La méthode jQuery.append() div permet d’ajouter un conteneur avec un pa­ra­graphe à 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 pro­prié­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 si­mul­ta­né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 cor­res­pon­dant à la console.