首頁 > 開發者 > JavaScript
jQuery動態建立html元素的常用方法匯總，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程式設計有一定的借鑒價值。
jQuery 選取器
jQuery 元素選取器和屬性選取器允許您通過標籤名、屬性名稱或內容對 HTML 元素進行選擇。
選取器允許您對 HTML 元素組或單個元素進行操作。
在 HTML DOM 術語中：
選取器允許您對 DOM 元素組或單個 DOM 節點進行操作。
選取器 執行個體 選取
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一個 <p> 元素
:last $("p:last") 最後一個 <p> 元素
:even $("tr:even") 所有偶數 <tr> 元素
:odd $("tr:odd") 所有奇數 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四個元素（index 從 0 開始）
:gt(no) $("ul li:gt(3)") 列出 index 大於 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小於 3 的元素
:not(selector) $("input:not(:empty)") 所有不為空白的 input 元素
:header $(":header") 所有標題元素 <h1> - <h6>
:animated 所有動畫元素
:contains(text) $(":contains('W3School')") 包含指定字串的所有元素
:empty $(":empty") 無子（元素）節點的所有元素
:hidden $("p:hidden") 所有隱藏的 <p> 元素
:visible $("table:visible") 所有可見的表格
s1,s2,s3 $("th,td,.intro") 所有帶有匹配選擇的元素
[attribute] $("[href]") 所有帶有 href 屬性的元素
[attribute=value] $("[href='#']") 所有 href 屬性的值等於 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 屬性的值不等於 "#"......餘下全文>>
JQuery裡的代碼不可以響應動態產生的html元素的click事件，怎解決？
你可以換個思路解決這種問題
不要監聽動態html元素，可以監聽這些元素的父節點，再使用jQuery的is方法判斷是不是想要的元素。
附上例子
<body>
<script type="text/javascript">
$(function(){
$("#aaa").click(function(e){
if($(e.target).is(".bbb")){
alert(1);
};
});
});
</script>
<table id="aaa" border="1">
<tr>
<td><input type="button" class="bbb" value="sadasd"> <a href="javascript:void(0)" class="bbb">asdasd</a></td>
</tr>
<tr>
<td><input type="button" class="bbb" value="sadasd"> <a href="javascript:void(0)" class="bbb">asdasd</a></td>
</tr>
</table>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
