suchen

Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung gängiger Methoden zum dynamischen Erstellen von HTML-Elementen mit jQuery_jquery

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

WBOY
WBOYOriginal
2016-05-16 16:37:081184Durchsuche

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>

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>

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Mobiltelefonnummer, Passwort, regelmäßige Verifizierung_Javascript-KenntnisseNächster Artikel：Mobiltelefonnummer, Passwort, regelmäßige Verifizierung_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen