《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.9　技巧：使用jQuery动态生成HTML

本节书摘来自异步社区《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 

02 html lang="en" 

03 head 

04 title Generate HTML using jQuery /title 

05 style 

06 /* 请将下列代码移至一个外部的

07 .css文件 */

08 .test {

09 background-color: yellow;

11 /style 

12 /head 

13 body 

15 p Under this paragraph, you should see a yellow bulleted list /p 

17 div id="append-to-placeholder" 

18 /div 

20 script src="http://code.jquery.com/jquery-1.7.2.min.js" /script 

22 script 

23 // 请将下列代码移至一个外部的.js文件中

24 $(document).ready(function() {

26 var htmlGen = function() {

27 return  li 1 /li li 2 /li 

30 $( p/ , {

31 class: test,

32 html: $( ul/ , {html: htmlGen})

33 }).appendTo(#append-to-placeholder);

35 });

36 /script 

37 /body 

38 /html 

在这个例子中，第26～28行是“生成”HTML的函数。第32行引用了这个函数，它是会自动执行的。第30～32行的这种嵌套方式能够以一种更加动态的方法构建HTML元素。第31行的class的值可以是变量，可以按条件替换。

异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。