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

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

WBOY

Libérer： 2016-05-16 16:37:08

original

1194 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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