cari

Rumah >hujung hadapan web >tutorial js >Ringkasan kaedah biasa untuk mencipta elemen html secara dinamik dengan jQuery_jquery

Ringkasan kaedah biasa untuk mencipta elemen html secara dinamik dengan jQuery_jquery

WBOY
WBOYasal
2016-05-16 16:37:081215semak imbas

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>

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>

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Nombor telefon mudah alih, kata laluan biasa verification_javascript kemahiranArtikel seterusnya：Nombor telefon mudah alih, kata laluan biasa verification_javascript kemahiran

Artikel berkaitan

Lihat lagi