jQuery動(dòng)態(tài)創(chuàng)建html元素的常用方法匯總

更新時(shí)間：2014年09月05日 10:00:29 投稿：shichen2014

這篇文章主要介紹了jQuery動(dòng)態(tài)創(chuàng)建html元素的常用方法,包括jQuery追加元素、遍歷數(shù)組以及使用模板等方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery動(dòng)態(tài)創(chuàng)建html元素的常用方法，在使用jQuery進(jìn)行WEB程序設(shè)計(jì)的時(shí)候非常有用。分享給大家供大家參考。具體方法如下：

一般來說，可以通過以下幾種方式動(dòng)態(tài)創(chuàng)建html元素：

1、使用jQuery創(chuàng)建元素的語法
2、把動(dòng)態(tài)內(nèi)容存放到數(shù)組中，再遍歷數(shù)組動(dòng)態(tài)創(chuàng)建html元素
3、使用模版

1.使用jQuery動(dòng)態(tài)創(chuàng)建元素追加到j(luò)Query對(duì)象上。

 <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("點(diǎn)我了~~");
         }
       }).appendTo($('#wrap'));
     });
   </script>
 </head>
 <body>
   <div id="wrap"></div>
 </body>

運(yùn)行效果如下圖所示：

2.先把內(nèi)容放到數(shù)組中，然后遍歷數(shù)組拼接成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>

運(yùn)行效果如下圖所示：

3.使用模版生成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 ? ">" + html + "</" + tag + ">" : "/>";
     };
   </script>
 </head>
 <body>
   <div id="wrap1"></div>
   <div id="wrap2"></div>
 </body>

運(yùn)行效果如下圖所示：