本文实例讲述了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程序设计有一定的借鉴价值。