The examples in this article describe the common methods of dynamically creating html elements with jQuery, which are very useful when using jQuery for WEB programming. Share it with everyone for your reference. The specific method is as follows:
Generally speaking, html elements can be dynamically created in the following ways:
1. Syntax for creating elements using jQuery
2. Store the dynamic content in the array, then traverse the array to dynamically create html elements
3. Use templates
1. Use jQuery to dynamically create elements and append them to the jQuery object.
<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>
The operation effect is as shown below:
2. First put the content into the array, then traverse the array and splice it into 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>
The operation effect is as shown below:
3. Use templates to generate 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>
The operation effect is as shown below:
I believe that what is described in this article has certain reference value for everyone to use jQuery for WEB programming.