本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章，第3.9节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
3.9 技巧：使用jQuery动态生成HTML
在前面的例子中，HTML几乎都是直接用文本字符串生成的。其实还可以使用jQuery来生成HTML。传入属性映射（property map）对象作为HTML元素的属性（attribute），在映射对象中可以嵌套HTML元素作为子元素。代码清单3-9演示了如何使用这种方式来生成HTML。
代码清单3-9 使用jQuery构建无序列表
00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04 <title>Generate HTML using jQuery</title>
05 <style>
06 /* 请将下列代码移至一个外部的
07 .css文件 */
08 .test {
09 background-color: yellow;
10 }
11 </style>
12 </head>
13 <body>
14
15 <p>Under this paragraph, you should see a yellow bulleted list</p>
16
17 <div id="append-to-placeholder">
18 </div>
19
20 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
21
22 <script>
23 // 请将下列代码移至一个外部的.js文件中
24 $(document).ready(function() {
25
26 var htmlGen = function() {
27 return '<li>1</li><li>2</li>';
28 }
29
30 $('<p/>', {
31 class: 'test',
32 html: $('<ul/>', {html: htmlGen})
33 }).appendTo('#append-to-placeholder');
34
35 });
36 </script>
37 </body>
38 </html>
在这个例子中，第26～28行是“生成”HTML的函数。第32行引用了这个函数，它是会自动执行的。第30～32行的这种嵌套方式能够以一种更加动态的方法构建HTML元素。第31行的class的值可以是变量，可以按条件替换。
