jQuery动态创建html元素的常用方法汇总-工具盒子

本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：

一般来说，可以通过以下几种方式动态创建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.使用模版生成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(&quot;input&quot;, {
id: &quot;myInput&quot;,
type: &quot;text&quot;,
value: &quot;我也是由模版生成的~~&quot;
});
$('#wrap2').append(input);
});
buildHTML = function(tag, html, attrs) {
// you can skip html param
if (typeof (html) != 'string') {
attrs = html;
html = null;
}
var h = '&lt;' + tag;
for (attr in attrs) {
if (attrs[attr] === false) continue;
h += ' ' + attr + '=&quot;' + attrs[attr] + '&quot;';
}
return h += html ? &quot;&gt;&quot; + html + &quot;&lt;/&quot; + tag + &quot;&gt;&quot; : &quot;/&gt;&quot;;
};

</script>
</head>
<body>
<div id="wrap1"></div>
<div id="wrap2"></div>
</body>

运行效果如下图所示：