En tant que bibliothèque JavaScript couramment utilisée dans le développement front-end, jQuery présente une grande praticité et commodité dans les opérations DOM. Parmi eux, l'ajout dynamique d'éléments HTML est l'une des opérations courantes de jQuery, en particulier lors de l'exploitation de tables, l'ajout dynamique d'éléments

Dans jQuery, il existe de nombreuses façons d'ajouter des éléments . Ci-dessous, nous présenterons plusieurs méthodes courantes à titre de référence.

1. Utilisez la méthode append(). La méthode

append() peut ajouter le code ou l'élément HTML spécifié à la fin de l'élément existant. Par conséquent, nous pouvons utiliser la méthode append() pour ajouter un élément à

. L'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      $("table").append("<tr><td>新行的单元格 1</td><td>新行的单元格 2</td></tr>");
   });
});

Copier après la connexion

Dans l'exemple de code, lorsque vous cliquez sur le bouton, un nouveau

sera ajouté à la table ;élément.

2. Utilisez la méthode eq() pour ajouter dynamiquement des lignes

La méthode eq() peut sélectionner des éléments à des positions d'index spécifiées dans la collection d'éléments correspondants. Par conséquent, nous pouvons d'abord obtenir l'élément

spécifié, puis utiliser la méthode eq() pour le copier et l'insérer dans le tableau. L'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      var $cloneRow=$("table tr").eq(0).clone();
      $("table").append($cloneRow);
   });
});

Copier après la connexion

Dans l'exemple de code, nous ajoutons l'élément

premier élément du tableau L'élément est copié et inséré dans le tableau.

3. Utilisez la méthode after() pour ajouter des lignes

La méthode after() peut insérer le code HTML ou l'élément spécifié après l'élément spécifié. Par conséquent, nous pouvons insérer un nouvel élément

à la position spécifiée dans le tableau, l'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>");
      $("table tr:eq(0)").after($newRow);
   });
});

Copier après la connexion

Dans l'exemple de code, nous insérons le nouvel élément

table après l'élément ;tr>

4. Utilisez la méthode appendTo() pour ajouter des lignes

La méthode appendTo() peut insérer l'élément spécifié dans la position finale interne d'un autre élément spécifié. Par conséquent, nous pouvons d'abord créer un nouvel élément

et l'insérer dans le document, puis utiliser la méthode appendTo() pour l'insérer dans le tableau. L'exemple de code est le suivant :

$(document).ready(function(){
   $("button").click(function(){
      var $newRow=$("<tr><td>单元格1</td><td>单元格2</td></tr>").appendTo("table");
   });
});

Copier après la connexion

Dans l'exemple de code, nous créons d'abord un nouvel élément

et l'insérons dans le tableau.

En développement réel, choisissez différentes méthodes en fonction des besoins spécifiques pour mettre en œuvre l'opération d'ajout d'éléments

Quelle que soit la méthode utilisée, la flexibilité et la commodité de jQuery peuvent être utilisées pour modifier et développer dynamiquement des documents HTML. Dans le même temps, nous devons également veiller à définir correctement les attributs et les styles des éléments lors de l'ajout dynamique d'éléments afin de garantir la beauté globale de la page.

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!

Article précédent：Comment utiliser scrollview avec jquery Article suivant：ie8 jquery get n'est pas pris en charge

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur