Ajout d'éléments avec jQuery

Avec jQuery, il est facile d'ajouter de nouveaux éléments/contenu.

Ajout de nouveau contenu HTML

Nous allons étudier quatre méthodes jQuery utilisées pour ajouter du contenu nouveau :

  • append() - Insérer du contenu à la fin de l'élément sélectionné
  • prepend() - Insérer du contenu au début de l'élément sélectionné
  • after() - Insérer du contenu après l'élément sélectionné
  • before() - Insérer du contenu avant l'élément sélectionné

Méthode append() de jQuery

La méthode append() de jQuery insère du contenu à la fin de l'élément sélectionné.

Exemple

$("p").append("Some appended text.");

Essayez-le vous-même

Méthode prepend() de jQuery

La méthode prepend() de jQuery insère du contenu au début de l'élément sélectionné.

Exemple

$("p").prepend("Some prepended text.");

Essayez-le vous-même

Ajout de plusieurs nouveaux éléments via append() et prepend()

Dans l'exemple ci-dessus, nous avons inséré du texte/HTML uniquement au début ou à la fin de l'élément sélectionné.

Cependant, les méthodes append() et prepend() peuvent recevoir un nombre illimité de nouveaux éléments en tant que paramètres. Il est possible de générer du texte/HTML via jQuery (comme dans l'exemple ci-dessus) ou via du code JavaScript et des éléments DOM.

Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Ces éléments peuvent être créés via text/HTML, jQuery ou JavaScript/DOM. Ensuite, nous utilisons la méthode append() pour ajouter ces nouveaux éléments au texte (c'est aussi valable pour prepend()):

Exemple

function appendText()
{
var txt1="<p>Text.</p>";               // Créer un nouvel élément en utilisant HTML
var txt2=$("<p></p>").text("Text.");   // En utilisant jQuery pour créer un nouvel élément
var txt3=document.createElement("p");  // Créer un nouvel élément via DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Ajouter de nouveaux éléments
{}

Essayez-le vous-même

Méthodes after() et before() jQuery

La méthode after() jQuery insère du contenu après l'élément sélectionné.

La méthode before() jQuery insère du contenu avant l'élément sélectionné.

Exemple

$("img").after("Some text after");
$("img").before("Some text before");

Essayez-le vous-même

Ajout de plusieurs nouveaux éléments via after() et before()

Les méthodes after() et before() peuvent recevoir un nombre illimité de nouveaux éléments en tant que paramètres. Ces nouveaux éléments peuvent être créés via text/HTML, jQuery ou JavaScript/DOM.

Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Ces éléments peuvent être créés via text/HTML, jQuery ou JavaScript/DOM. Ensuite, nous utilisons la méthode after() pour insérer ces nouveaux éléments dans le texte (c'est aussi valable pour before()) :

Exemple

function afterText()
{
var txt1="<b>I </b>";                    // Créer un nouvel élément en HTML
var txt2=$("<i></i>").text("love ");     // Créer un nouvel élément via jQuery
var txt3=document.createElement("big");  // Créer un nouvel élément via DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Insérer un nouvel élément après img
{}

Essayez-le vous-même

Manuel de référence jQuery HTML

Pour des informations complètes sur les méthodes HTML jQuery, veuillez consulter le manuel de référence suivant :