js动态加载列表

这里用的是json做数据，其实在相应的工作中我们是后台给我们的数据，但是也是json数据。

<pre name="code" class="html"><script>
var my_json='[{name:"范玮琪",sex:"悄悄告诉你"},{name:"范玮琪",sex:"悄悄告诉你"},{name:"范玮琪",sex:"悄悄告诉你"},{name:"范玮琪",sex:"悄悄告诉你"}]';
var my_object=eval('('+my_json+')');
function obj(eve){
this.html = eve.name;
this.html = eve.sex;
this.get = function(){
return "<div class='fir'>"+eve.name+"</div>" + "<div class='second'>"+eve.sex+"</div>";
}
}
for(var i = 0;i<my_object.length;i++){
var new_obj = new obj(my_object[i]);
var div = document.createElement('div');
div.id = 'list';
document.body.appendChild(div);
div.innerHTML += new_obj.get();
}
</script>

<style type="text/css">
body{
background-color:white;
}
#list{
height:100px;
border-bottom:1px solid lightgray;
}
.fir{
padding-top:15px;
padding-left:50px;
color:skyblue;
}
.second{
padding-top:5px;
padding-left:50px;
color:lightgray;
font-size:0.9em;
}
</style>

这样子我们的列表就做好了。