3.9 技巧：使用jQuery动态生成HTML_H5之家 - 中国HTML5教程资源分享第一站

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> 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的值可以是变量，可以按条件替换。