阅读这篇文章后，对html和json有很大的启发：
http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/
然后这是一个缩减版的：
大致步骤是：
1、准备好html模板
2、准备好json数据
3、设置匹配方法
4、将整合数据加入内容区
<!DOCTYPE html> <html lang="zn-ch"> <head> <meta charset="UTF-8"> <title>tempo</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <!--内容区 --> <ul></ul> <!--模板区 --> <textarea style="display:none;"> <li> $name$ </li> </textarea> <script type="text/javascript"> <!--json数据 --> var mydata = [ {'name':'Bob','age':40}, {'name':'Frank','age':15}, {'name':'Bill','age':65}, {'name':'Robert','age':24} ]; //字符串扩展匹配方法，json数据的name将替换模板的$name$ String.prototype.temp = function(obj) { return this.replace(/$w+$/gi, function(matchs) { var returns = obj[matchs.replace(/$/g, "")]; return (returns + "") == "undefined"? "": returns; }); }; //定义最终合成数据 var htmlList =""; //html模板 var htmlTemp = $("textarea").val(); //匹配对应字符串 mydata.forEach(function(object) { htmlList += htmlTemp.temp(object); }); //合成内容放进内容区 $("ul").html(htmlList); </script> </body> </html>
此外，也可借助其他工具实现json和html的交互，如：