Zusammenfassung gängiger Methoden zum dynamischen Erstellen von HTML-Elementen mit jQuery

Zusammenfassung gängiger Methoden zum dynamischen Erstellen von HTML-Elementen mit jQuery_jquery

WBOY

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

Original

1198 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die gängige Methode zum dynamischen Erstellen von HTML-Elementen mit jQuery, die bei der Verwendung von jQuery für die WEB-Programmierung sehr nützlich ist. Teilen Sie es als Referenz mit allen. Die spezifische Methode ist wie folgt:

Im Allgemeinen können HTML-Elemente auf folgende Weise dynamisch erstellt werden:

1. Syntax zum Erstellen von Elementen mit jQuery
2. Speichern Sie den dynamischen Inhalt im Array und durchlaufen Sie dann das Array, um dynamisch HTML-Elemente zu erstellen
3. Verwenden Sie Vorlagen

1. Verwenden Sie jQuery, um Elemente dynamisch zu erstellen und sie an das jQuery-Objekt anzuhängen.

 <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>

Nach dem Login kopieren

Der Betriebseffekt ist wie folgt:

2. Fügen Sie zuerst den Inhalt in das Array ein, durchlaufen Sie dann das Array und fügen Sie ihn in HTML ein

 <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>

Nach dem Login kopieren

Der Betriebseffekt ist wie folgt:

3. Verwenden Sie Vorlagen, um HTML zu generieren

 <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>

Nach dem Login kopieren

Der Betriebseffekt ist wie folgt:

Ich glaube, dass das, was in diesem Artikel beschrieben wird, für jeden einen gewissen Referenzwert hat, um jQuery für die WEB-Programmierung zu verwenden.