Ringkasan kaedah biasa untuk mencipta elemen html secara dinamik dengan jQuery

Ringkasan kaedah biasa untuk mencipta elemen html secara dinamik dengan jQuery_jquery

WBOY

Lepaskan： 2016-05-16 16:37:08

asal

1214 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah biasa untuk mencipta elemen html secara dinamik dengan jQuery, yang sangat berguna apabila menggunakan jQuery untuk pengaturcaraan WEB. Kongsikan dengan semua orang untuk rujukan anda. Kaedah khusus adalah seperti berikut:

Secara umumnya, elemen html boleh dicipta secara dinamik dengan cara berikut:

1. Sintaks untuk mencipta elemen menggunakan jQuery
2. Simpan kandungan dinamik dalam tatasusunan, kemudian lintasi tatasusunan untuk mencipta elemen html secara dinamik
3. Gunakan templat

1. Gunakan jQuery untuk mencipta elemen secara dinamik dan menambahkannya pada objek 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>

Salin selepas log masuk

Kesan operasi adalah seperti yang ditunjukkan di bawah:

2. Mula-mula masukkan kandungan ke dalam tatasusunan, kemudian lintasi tatasusunan dan sambungkannya ke dalam 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>

Salin selepas log masuk

Kesan operasi adalah seperti yang ditunjukkan di bawah:

3. Gunakan templat untuk menjana 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>

Salin selepas log masuk

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Saya percaya bahawa apa yang diterangkan dalam artikel ini mempunyai nilai rujukan tertentu untuk semua orang menggunakan jQuery untuk pengaturcaraan WEB.