本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：
一般来说，可以通过以下几种方式动态创建html元素：
1、使用jQuery创建元素的语法
2、把动态内容存放到数组中，再遍历数组动态创建html元素
3、使用模版
1.使用jQuery动态创建元素追加到jQuery对象上。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<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> |
运行效果如下图所示：
相信本文所述对大家使用jQuery进行WEB程序设计有一定的借鉴价值。
