Comment ajouter et supprimer dynamiquement du contenu div dans jquery

Dans le développement front-end, utiliser jQuery pour ajouter ou supprimer dynamiquement des éléments de page est un besoin très courant. Cet article explique comment utiliser jQuery pour ajouter ou supprimer dynamiquement du contenu div sur la page.

1. Ajouter du contenu div

Le moyen le plus simple d'ajouter du contenu div est d'utiliser la méthode d'ajout de jQuery. Cette méthode ajoute un nouvel élément à la fin d'un élément existant.

L'exemple de code est le suivant :

$(document).ready(function() {
    $("#addBtn").click(function() {
        $("#myDiv").append("<p>这是新的一行内容。</p>")
    });
});

Dans l'exemple de code ci-dessus, un événement est déclenché en cliquant sur un bouton pour ajouter une nouvelle ligne de p éléments à la fin de l'élément avec l'identifiant "myDiv". Cet élément p contient le contenu qui doit être ajouté, qui peut être n'importe quelle balise HTML et texte.

Si vous devez ajouter plusieurs lignes de contenu, vous pouvez modifier le contenu dans la méthode d'ajout de l'exemple de code ci-dessus par le code html qui doit être ajouté. Vous pouvez également utiliser une boucle pour ajouter le même contenu à plusieurs reprises, par exemple :

$(document).ready(function() {
    $("#addBtn").click(function() {
        for(var i = 0; i < 5; i++) {
            $("#myDiv").append("<p>这是新的一行内容。</p>");
        }
    });
});

Dans l'exemple de code ci-dessus, cliquer sur le bouton ajoutera 5 lignes de nouveaux éléments p à la fin de l'élément avec l'identifiant "myDiv", chacun ligne contenant le même code html.

2. Supprimer le contenu div

La méthode d'utilisation de jQuery pour supprimer le contenu div est également très simple. Vous pouvez utiliser la méthode supprimer ou vider.

1. méthoderemove

la méthoderemove peut supprimer l'élément sélectionné et tous ses éléments enfants. L'exemple de code est le suivant :

$(document).ready(function() {
    $("#removeBtn").click(function() {
        $("#myDiv").remove();
    });
});

Dans l'exemple de code ci-dessus, cliquer sur le bouton supprimera l'élément avec l'identifiant "myDiv" et tous ses éléments enfants.

2. méthode vide

La méthode vide peut supprimer tous les éléments enfants de l'élément sélectionné, mais conserver l'élément sélectionné lui-même. L'exemple de code est le suivant :

$(document).ready(function() {
    $("#emptyBtn").click(function() {
        $("#myDiv").empty();
    });
});

Dans l'exemple de code ci-dessus, cliquer sur le bouton conservera l'élément lui-même avec l'identifiant "myDiv" mais supprimera tous les éléments enfants de cet élément.

3. Résumé

Grâce à l'introduction ci-dessus, nous pouvons voir qu'il est très simple d'utiliser jQuery pour ajouter ou supprimer dynamiquement du contenu div. Utilisez simplement la méthode append pour ajouter du contenu et la méthode Remove ou Empty pour supprimer du contenu. Dans les projets réels, cette fonction est généralement utilisée pour afficher dynamiquement des données, ajouter et supprimer des éléments de formulaire, etc. Les développeurs peuvent utiliser et ajuster davantage cette fonctionnalité en fonction de différents besoins.

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!