JQuery, une bibliothèque de JavaScript, rend de nombreuses tâches de programmation Web extrêmement faciles à accomplir. Les tâches qui prendraient normalement plusieurs lignes de code à réaliser, telles que la gestion des événements, les animations ou l'AJAX, peuvent être effectuées dans une seule ligne de code. Outre ces tâches, l'ajout d'éléments HTML avec une grande facilité est possible en utilisant plusieurs méthodes fournies dans jQuery.

Ce guide vous apprendra à ajouter des éléments HTML via jQuery en utilisant plusieurs méthodes à l'aide d'exemples appropriés.

Comment ajouter des éléments HTML via jQuery

jQuery fournit les quatre méthodes suivantes pour ajouter des éléments HTML.

1. ajouter()
2. prend ()
3. avant()
4. après()

Ici, nous avons discuté de tout cela en détail.

Méthode annexée ()

La méthode annexée () ajoute un élément en tant qu'enfant dans un élément spécifié. Il faut un nombre illimité de nouveaux éléments HTML sous forme de paramètres.

Cette méthode fonctionne de manière à ce que les éléments HTML soient générés à l'aide de texte / HTML, jQuery ou JavaScript. Par la suite, ces éléments nouvellement générés sont annexés comme le dernier enfant en utilisant la méthode annexe ().

Exemple

Supposons que vous souhaitiez ajouter de nouveaux éléments à la fin d'une liste commandée à l'aide de la méthode annexée (). Utilisez le code suivant.

Html

1. Article


2. Article


3. Article

Dans le code ci-dessus, nous avons fait un bouton et créé également une liste commandée.

jquery

À l'aide de la méthode jQuery annex (), nous ajouterons un autre élément à la liste en cliquant sur le bouton.

Sortir

Il y avait trois éléments dans la liste, initialement.

Supposons que vous cliquez sur le bouton trois fois.

Trois autres éléments sont ajoutés à la liste.

Méthode prend ()

Cette méthode fonctionne d'une manière similaire à celle de la méthode annexée () avec la seule différence que, au lieu d'ajouter les éléments HTML nouvellement créés, il appliquera les éléments en tant que premier enfant. Il faut également un nombre illimité de nouveaux éléments HTML sous forme de paramètres.

Exemple

Nous utiliserons le même exemple que ci-dessus et verrons comment fonctionne la méthode prend ().

jquery

Dans l'extrait de code ci-dessus, nous utilisons la méthode prend () pour ajouter des éléments au début de la liste commandée.

Sortir

À l'origine, il y avait trois éléments sur la liste.

Supposons que vous cliquez deux fois sur le bouton.

Deux éléments sont ajoutés au début de la liste commandée.

Méthode avant ()

La méthode avant () prend un nombre illimité de nouveaux éléments HTML sous forme de paramètres. Cette méthode fonctionne de manière à ce que les éléments HTML soient générés à l'aide de texte / html, jQuery ou JavaScript et sont ajoutés avant un élément déjà existant en tant que frère.

Exemple

Supposons que vous souhaitiez ajouter un titre avant un paragraphe en cliquant sur un bouton. Cela peut être fait en utilisant la méthode avant ().

Html

Un paragraphe.

Dans le code ci-dessus, nous avons créé

, et des éléments. Nous allons maintenant utiliser la méthode avant () pour ajouter une rubrique avant le paragraphe.

jquery

Sortir

La méthode avant () fonctionne correctement

Méthode après ()

Cette méthode prend un nombre illimité de nouveaux éléments HTML sous forme de paramètres. Cette méthode fonctionne de manière similaire à celle de la méthode avant () avec la seule différence étant que les nouveaux éléments HTML sont ajoutés comme un frère ou une sœur mais après les éléments déjà existants.

Exemple

Supposons que vous souhaitiez ajouter un paragraphe après une rubrique en cliquant sur un bouton. Cela peut être fait en utilisant la méthode After ().

Html

Titre

Dans le code ci-dessus, nous avons créé

, et des éléments, et en utilisant la méthode After (), un paragraphe sera ajouté après la rubrique.

jquery

Sortir

Ajout avec succès un paragraphe après le titre.

Conclusion

Des éléments HTML peuvent être ajoutés en utilisant diverses méthodes fournies par jQuery telles que A SPEND (), Prend (), avant () et After (). Toutes ces méthodes prennent un nombre illimité de nouveaux éléments HTML sous forme de paramètres et une fois les éléments générés, ils sont ajoutés à leurs positions appropriées en ce qui concerne la méthode utilisée. Toutes ces méthodes sont discutées en profondeur dans ce guide, ainsi que des exemples pertinents.