Ajouter un élément jQuery

Une partie très importante de jQuery est la manipulation du DOM.

jQuery offre des méthodes efficaces pour ajouter de nouveaux éléments HTML.

Dans ce chapitre, nous allons expliquer comment ajouter de nouveaux éléments HTML au DOM./de contenu.

Ajout de nouveaux contenus HTML avec jQuery

Avec jQuery, nous pouvons facilement ajouter de nouveaux éléments HTML.

Nous avons les méthodes jQuery suivantes pour ajouter du nouveau contenu :

• append()

• prepend()

• after()

• before()

• wrap()

Je vais vous montrer comment utiliser chaque méthode.

Méthode jQuery append()

jQuery append()La méthode insère le contenu spécifié à la fin de chaque élément sélectionné (comme dernier élément fils).

Dans l'exemple suivant, nous attachons du texte à tous les paragraphes :

$("button").click(function(){
　　$("p").append("Hello world");
});

Dans l'exemple suivant, nous attachons du HTML à tous les paragraphes :

$("button").click(function(){
　　$("p").append("<b>Hello world</b>");
});

Méthode jQuery prepend()

jQuery prepend()La méthode insère le contenu spécifié au début de chaque élément sélectionné (comme premier élément fils).

Dans l'exemple suivant, nous avons ajouté du texte avant tous les paragraphes :

$("button").click(function(){
　　$("p").prepend("Hello world");
});

Dans l'exemple suivant, nous avons ajouté du HTML avant tous les paragraphes :

$("button").click(function(){
　　$("p").prepend("<b>Hello world</b>");
});

Ajouter plusieurs éléments avec append() et prepend()

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

Mais,append()etprepend()Les méthodes peuvent accepter un nombre illimité de nouveaux éléments en tant que paramètres.

Les nouveaux éléments peuvent être générés à l'aide d'éléments HTML (comme dans l'exemple ci-dessus), d'éléments DOM ou d'objets jQuery.

Dans l'exemple suivant, nous utilisons des éléments HTML, des éléments DOM et des objets jQuery pour créer plusieurs nouveaux éléments :

function appendText() {
　　let x = "<p>Exemple de texte.<"/p>";　　//　Créer des éléments avec HTML　　
　　let y = $("<p><"/p>";)　　//　Créer avec jQuery
　　let z = document.createElement("p");//　Créer avec DOM
　　z.innerHTML = "Texte d'exemple.";
　　$("body").append(x, y, z);　　//Ajouter de nouveaux éléments　
}

Méthode jQuery after()

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

Dans l'exemple suivant, nous insérons du contenu après chaque paragraphe :

$("button").click(function(){
　　$("p").after("<p>Hello world</p>");
});

Méthode jQuery before()

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

Dans l'exemple suivant, nous insérons du contenu avant chaque paragraphe :

$("button").click(function(){
　　$("p").before("<p>Hello world</p>");
});

ajouter plusieurs éléments avec after() et before()

De même,after()etbefore()Les méthodes peuvent accepter un nombre illimité de nouveaux éléments en tant que paramètres.

Les nouveaux éléments peuvent être générés à l'aide d'éléments HTML (comme dans l'exemple ci-dessus), d'éléments DOM ou d'objets jQuery.

Dans l'exemple suivant, nous utilisons des éléments HTML, des éléments DOM et des objets jQuery pour créer plusieurs nouveaux éléments :

function afterText() {
　　let x = "<p>Exemple de texte.<"/p>";　　//　Créer des éléments avec HTML　　
　　let y = $("<p><"/p>";)　　//　Créer avec jQuery
　　let z = document.createElement("p");//　Créer avec DOM
　　z.innerHTML = "Texte d'exemple.";
　$("h1").after(x, y, z);　　//　Dans <h1Insérer un nouvel élément après>
}

Méthode wrap() jQuery

jQuery wrap()La méthode enveloppe la structure HTML spécifiée autour de chaque élément sélectionné.

Le suivant est un exemple qui enveloppe chaque élément DIV autour de chaque élément <p> :

$("button").click(function(){
　　$("p").wrap("<div><"/div>"
});

Référence HTML jQuery

Pour une référence complète des méthodes HTML, veuillez visiter notreHTML jQuery / Référence CSS.