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（"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程序设计有一定的借鉴价值。