Maison >interface Web >js tutoriel >Résumé des méthodes courantes pour créer dynamiquement des éléments HTML avec jQuery_jquery

Résumé des méthodes courantes pour créer dynamiquement des éléments HTML avec jQuery_jquery

WBOYoriginal: 2016-05-16 16:37:081196parcourir

L'exemple de cet article décrit la méthode courante de création dynamique d'éléments html avec jQuery, ce qui est très utile lors de l'utilisation de jQuery pour la programmation WEB. Partagez-le avec tout le monde pour votre référence. La méthode spécifique est la suivante :

De manière générale, les éléments HTML peuvent être créés dynamiquement des manières suivantes :

1. Syntaxe pour créer des éléments à l'aide de jQuery
2. Stockez le contenu dynamique dans le tableau, puis parcourez le tableau pour créer dynamiquement des éléments HTML
3. Utilisez des modèles

1. Utilisez jQuery pour créer dynamiquement des éléments et les ajouter à l'objet jQuery.

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title></title>
   <script src="Scripts/jquery-1.10.2.js"></script>
   <script type="text/javascript">
     $(function() {
       $('<input />', {
         id: 'cbx',
         name: 'cbx',
         type: 'checkbox',
         checked: 'checked',
         click: function() {
           alert("点我了~~");
         }
       }).appendTo($('#wrap'));
     });
   </script>
 </head>
 <body>
   <div id="wrap"></div>
 </body>

L'effet de l'opération est comme indiqué ci-dessous :

2. Mettez d'abord le contenu dans le tableau, puis parcourez le tableau et divisez-le en HTML

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title></title>
   <script src="Scripts/jquery-1.10.2.js"></script>
   <style type="text/css">
     table {
       border: solid 1px red;
       border-collapse: collapse;
     }
  
     td {
       border: solid 1px red;
     }
   </style>
   <script type="text/javascript">
     $(function () {
       var data = ["a", "b", "c", "d"];
       var html = '';
       for (var i = 0; i < data.length; i ++) {
         html += "<td>" + data[i] + "</td>";
       }
       $("#row").append(html);
     });
   </script>
 </head>
 <body>
   <table>
     <tr id="row"></tr>
   </table>
 </body>
 </html>

L'effet de l'opération est comme indiqué ci-dessous :

3. Utilisez des modèles pour générer du HTML

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title></title>
   <script src="Scripts/jquery-1.10.2.js"></script>
   <script type="text/javascript">
     $(function () {
       var a = buildHTML("a", "我是由模版生成的", {
         id: "myLink",
         href: "http://www.baidu.com"
       });
  
       $('#wrap1').append(a);
  
       var input = buildHTML("input", {
         id: "myInput",
         type: "text",
         value: "我也是由模版生成的~~"
       });
  
       $('#wrap2').append(input);
     });
  
     buildHTML = function(tag, html, attrs) {
       // you can skip html param
       if (typeof (html) != 'string') {
         attrs = html;
         html = null;
       }
       var h = '<' + tag;
       for (attr in attrs) {
         if (attrs[attr] === false) continue;
         h += ' ' + attr + '="' + attrs[attr] + '"';
       }
       return h += html &#63; ">" + html + "</" + tag + ">" : "/>";
     };
   </script>
 </head>
 <body>
   <div id="wrap1"></div>
   <div id="wrap2"></div>
 </body>

L'effet de l'opération est comme indiqué ci-dessous :

Je crois que ce qui est décrit dans cet article a une certaine valeur de référence pour que tout le monde utilise jQuery pour la programmation WEB.

Déclaration：

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

Article précédent：Numéro de téléphone portable, vérification régulière du mot de passe_compétences javascriptArticle suivant：Numéro de téléphone portable, vérification régulière du mot de passe_compétences javascript

Articles Liés

Voir plus