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

2019-11-20 14:10:28

字體：大中小

供稿：網(wǎng)友

本文實(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對象上。

 <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)行效果如下圖所示：