Comment ajouter des éléments à l'aide de la méthode append dans jQuery-js tutoriel-php.cn

Comment ajouter des éléments à l'aide de la méthode append dans jQuery

不言

Libérer： 2018-12-28 17:35:09

original

6268 Les gens l'ont consulté

La méthode append est une méthode qui peut ajouter dynamiquement des éléments html. Il est très pratique d'utiliser la méthode append. Vous pouvez ajouter n'importe quel nombre de lignes d'éléments html. ajouter la méthode.

Comment ajouter des éléments à laide de la méthode append dans Comment ajouter des éléments à laide de la méthode append dans Comment ajouter des éléments à laide de la méthode append dans jQuery

Comment utiliser la méthode append ?

$(‘选择器’).append(‘添加的内容’);

Copier après la connexion

Après avoir spécifié la classe et l'ID dans le sélecteur, appelez append et spécifiez ce qu'il faut ajouter.

Regardons un exemple précis

Ajoutez l'élément li dans la balise ul en cliquant sur le bouton, le code est le suivant

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $(function() {
        $("button").click(function() {
          $("ul").append("<li>添加的内容</li>");
        });
      });
    </script>
  </head>
  <body>
    <button>button</button>
    <ul>
    </ul>
  </body>
</html>

Copier après la connexion

Créez un déclencheur pour être déclenché lorsque l'on clique sur le bouton, puis exécutez la méthode append.

Écrivez une méthode d'ajout pour le sélecteur, spécifiez la balise ul et ajoutez la balise li au sélecteur.

Ainsi, chaque fois que vous appuyez sur le bouton, la méthode append est appelée et le nombre d'éléments est incrémenté.

L'effet d'affichage sur le navigateur est le suivant

Lorsque vous cliquez sur le bouton, un élément de contenu apparaîtra à chaque fois que vous cliquez dessus. L'effet de cinq clics est le suivant :

Cet article se termine ici Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

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!