<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="artTamplate.js"></script>
<style>
ul{ list-style:none;}
li{ background-color:red; }
</style>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each arealist as value index}}
<li class="listLi">索引:{{index}} : id--{{value.id}}: name--{{value.name}}</li>
{{/each}}
</ul>
</script>
<script>
// var data = {
// title:'biaoqian',
// isAdmin: true,
// list:['文艺','博客','摄影','电影']
// };
// var html = template('test', data);
// document.getElementById('content').innerHTML = html;
</script>
<script>
function jh(data){
console.log(data.arealist);
var dataL = data.arealist;
var html = template('test',{arealist:dataL});
document.getElementById('content').innerHTML = html;
console.log(data);
var lL = document.getElementsByClassName('listLi');
for(var i = 0 ; i < lL.length; i++)
{
lL[i].index = i;
lL[i].onclick = function(){
for(var j = 0 ; j< lL.length; j++)
{
lL[j].style.background = "red";
}
this.style.background = 'green';
}
}
// var oSelect = document.getElementById('oSelect');
// var oOption = '';
// for(var i = 0 ; i < data.arealist[0].id; i++)
// {
// var oOption = document.createElement('option');
// oOption.value = i;
// oOption.innerHTML = data.arealist[i].name;
// oSelect.appendChild(oOption);
// }
}
var oBody = document.getElementsByTagName("body")[0];
// console.log(oBody);
function createScript(){
var oScript = document.createElement('script');
console.log(oScript);
oScript.src = "http://mall.cmbc.com.cn/mkt/sMarket/getAreaInfo.jhtml?callback=jh&pid=10&_=1453111635367";
oBody.appendChild(oScript);
}
createScript();
</script>
</body>
</html>