本文实例讲述了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>
<div id="wrap"></div>
</body>
<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;
border: solid 1px red;
</style>
<script type="text/javascript">
$(function() {
vardata = ["a","b","c","d"];
varhtml = '';
for(vari = 0; i < data.length; i ++) {
html += "<td>"+ data[i] + "</td>";
$("#row").append(html);
</script>
</head>
<table>
<tr id="row"></tr>
</table>
</body>
</html>
buildHTML = function(tag, html, attrs) {
// you can skip html param
if(typeof(html) != 'string') {
attrs = html;
html = null;
varh = '<'+ tag;
for(attr inattrs) {
if(attrs[attr] === false)continue;
h += ' ' + attr + '="'+ attrs[attr] + '"';
returnh += html ? ">"+ html + "</"+ tag + ">": "/>";
</script>
</head>
<div id="wrap1"></div>
<div id="wrap2"></div>
</body>