Comment ajouter progressivement des éléments dans jquery

jQuery, en tant que bibliothèque JavaScript populaire, peut non seulement améliorer l'efficacité du développement, mais également rendre le code plus simple et plus facile à comprendre. Lors du développement de pages Web, nous utilisons généralement jQuery pour ajouter, modifier et supprimer des éléments HTML.

Dans de nombreux cas, nous devons ajouter des éléments progressivement, c'est-à-dire ajouter de nouveaux sous-éléments aux éléments existants. À l’heure actuelle, les méthodes append() et prepend() de jQuery peuvent s’avérer utiles. Ces deux méthodes sont l'une des méthodes les plus couramment utilisées dans jQuery. Elles peuvent ajouter des éléments enfants respectivement à la fin et en tête de l'élément.

Tout d’abord, nous devons comprendre l’utilisation et les différences de ces deux méthodes.

Méthodes append() et prepend()

append()

append() insère du contenu après le dernier élément enfant d'un élément existant. Voici un exemple de code :

$(document).ready(function(){
  $("p").append(" 这是新的内容。");
});

Cela ajoutera du nouveau contenu à tous les éléments

Si vous souhaitez ajouter du nouveau contenu à tous les éléments du document, vous pouvez l'utiliser comme ceci : la méthode

$(document).ready(function(){
  $("*").append(" 这是新的内容。");
});

prepend()

prepend() insère du contenu devant le premier élément enfant d'un élément existant. Voici un exemple de code :

$(document).ready(function(){
  $("p").prepend(" 这是新的内容。");
});

Cela ajoutera du nouveau contenu à tous les éléments

Si vous souhaitez ajouter du nouveau contenu à tous les éléments du document, vous pouvez l'utiliser comme ceci :

$(document).ready(function(){
  $("*").prepend(" 这是新的内容。");
});

Ajouter des éléments de manière incrémentielle

Si nous devons ajouter de nouveaux sous-éléments à des éléments existants, vous pouvez utiliser append() ou pré-ajouter () méthode. Voici un exemple de code :

$(document).ready(function(){
  $(".container").append("<div> 这是新增的元素。</div>");
});

Cela ajoutera un nouvel élément après le dernier enfant d'un élément avec le nom de classe conteneur.

$(document).ready(function(){
  $(".container").prepend("<div> 这是新增的元素。</div>");
});

Cela ajoutera un nouvel élément devant le premier enfant de l'élément avec le nom de classe conteneur.

Si nous devons ajouter les mêmes éléments enfants à chaque élément, nous pouvons utiliser la méthode each() pour parcourir les éléments un par un et les ajouter progressivement.

$(document).ready(function(){
  $("p").each(function(){
    $(this).append(" 这是新增的内容。");
  });
});

Cela ajoutera le même contenu à chaque élément

Conclusion

Lors de l'ajout d'éléments de manière incrémentielle, nous pouvons utiliser les méthodes append() et prepend() dans jQuery. Ces méthodes offrent un moyen rapide et simple de modifier des éléments HTML. Nous pouvons également utiliser la méthode each() pour parcourir plusieurs éléments et effectuer la même opération. Cela peut nous aider à créer rapidement des pages Web interactives riches et à améliorer l’efficacité du développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!