您的位置：首页 > Web前端 > JQuery

JQuery html工具函数

2016-03-03 16:03 513 查看
（本文收集自互联网，作者不详..）

一般来说，可以通过以下几种方式使用jQuery动态创建html元素动态创建html元素：


1、使用jQuery创建元素的语法
2、把动态内容存放到数组中，再遍历数组动态创建html元素
3、使用模版

1.使用jQuery动态创建元素追加到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>



2.先把内容放到数组中，然后遍历数组拼接成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>



3.使用jQuery动态创建元素追加到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 () {
       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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航