直接上源码，原文http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { overflow-x:hidden;//是否对内容的左/右边缘进行裁剪
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
li {
margin-right:10px;
float:left;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<h1>HTML和JSON的数据交互 -HTML模板</h1>
<h2>使用模板化的方法解决json的循环显示</h2>
<div ><a href="http://www.zhangxinxu.com/wordpress/?p=2649">原文章 »</a></div>
<div ><a href="http://www.zhangxinxu.com/study/201209/javascript-data-template.html">原文章实例 »</a></div>
<ul id="ul">
test
</ul>
</div>
<textarea id="Area" style="display:none;">
<li>
<a href="javascript:" data-id="$couponid$">
<img src="$JSON.url$/$imgsrc$" width="240" height="180" />
<p>$traffic$</p>
<p>$buynum$人购买</p>
<div>
<div><del class="g6 db">¥$cost$现金券</del>$discount$折</div>
<strong class="cr price r pr20">¥$price$</strong>
</div>
<h3>$resname$</h3>
</a>
</li>
</textarea>
<script>
var JSON = {
url: "ajax.php?author=www.zhangxinxu.com",//这行没有用
data: [{
couponid: "111",
imgsrc: "test1.JPG",
resname: "俏江南 仙乐斯广场",
traffic: "肇嘉浜路沿线",
buynum: 180,
cost: 100,
discount: 8.5,
price: 85
}, {
couponid: "222222",
imgsrc: "222222.jpg",
resname: "申城五月天",
traffic: "静安寺",
buynum: 0,
cost: 100,
discount: 8.0,
price: 80
}, {
couponid: "3",
imgsrc: "go-baby.jpg",
resname: "申城五月天",
traffic: "静安寺",
buynum: 0,
cost: 100,
discount: 8.0,
price: 80
}]
};
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};
var htmlList = '';
htmlTemp = document.getElementById("Area").value;
JSON.data.forEach(function(object) {
htmlList += htmlTemp.temp(object);
});
//alert (htmlList)
document.getElementById("ul").innerHTML = htmlList;
</script>
</div>
</body>
</html>