javaScript学习-动态为ul添加li

实现思路：ul对象.append(li对象)；

实现：
HTML代码：

<div class="cityBox">        <div class="head">            <span class="title">选择城市</span>            <span class="close" onclick="closeFun()">关闭</span>        </div>        <div>            <div class="c1">                <label class="bt">省/直辖市:</label>                <ul class="list" id="province"></ul>            </div>            <hr/>            <ul class="list" style="width: 100%;" id="city"></ul>        </div></div>

CSS代码：

.cityBox{    width: 80% ;    min-height: 50%;    border: 3px solid moccasin;    position: absolute;    border-radius: 5px;    display: none;    background: #fff;    top: 7%;    left: 10%;    z-index: 1;}.cityBox .head{    height: 50px;    background: moccasin;   /*  text-align: center; */}.cityBox .head .title{    line-height: 40px;    font-size: 20px;    font-weight: bold;}.cityBox .head .close{    line-height: 50px;    font-size: 20px;    float: right;    margin-right: 10px;}.cityBox .head .close:hover{    color: red;}.cityBox .c1{    margin: 10px 10xp 10px 10px;}.cityBox .bt{    float: left;    font-size: 20px;}.cityBox .list{    float: left;    margin: 0;    padding: 0;    overflow: hidden;    width: 100%;    height : 10%;    text-align:center;}.cityBox .list li{    float: left;    width: 30%;    list-style: none;    text-align:center;    height: 10%;    line-height: 40px;    font-size: 20px;    color: #2e2e2e;    font-family: 微软雅黑;    font-weight: bold;    overflow: hidden;}.cityBox .list li:hover{    cursor: pointer;}.clear{    clear: both;}

JS代码：

var pac=[    {"id":"001","pac_name":"北京"}, {"id":"002","pac_name":"天津"}, {"id":"003","pac_name":"上海"}, {"id":"004","pac_name":"重庆"}, {"id":"005","pac_name":"河北"}, {"id":"006","pac_name":"山西"},    {"id":"007","pac_name":"内蒙古"}, {"id":"008","pac_name":"辽宁"}, {"id":"009","pac_name":"吉林"}, {"id":"010","pac_name":"黑龙江"}, {"id":"011","pac_name":"江苏"}, {"id":"012","pac_name":"浙江"},    {"id":"013","pac_name":"安徽"}, {"id":"014","pac_name":"福建"}, {"id":"015","pac_name":"江西"}, {"id":"016","pac_name":"山东"}, {"id":"017","pac_name":"河南"}, {"id":"018","pac_name":"湖北"},    {"id":"019","pac_name":"湖南"}, {"id":"020","pac_name":"广东"}, {"id":"021","pac_name":"广西"}, {"id":"022","pac_name":"海南"}, {"id":"023","pac_name":"四川"}, {"id":"024","pac_name":"贵州"},    {"id":"025","pac_name":"云南"}, {"id":"026","pac_name":"西藏"}, {"id":"027","pac_name":"陕西"}, {"id":"028","pac_name":"甘肃"}, {"id":"029","pac_name":"青海"}, {"id":"030","pac_name":"宁夏"},    {"id":"031","pac_name":"新疆"}];$(function(){    $(".btn").click(function(){        $("#province").html("");        $("#city").html("");        $(".cityBox").show();        var province=[];        var id=[];    /*  var str=eval(pac);        for(var i=0;i<str.length;i++) {            province[i] = str[i].pac_name;            id[i] = str[i].id;            var li ="<li value="+id[i]+" onclick='cityFun(this)'>"+ province[i]+"</li>";            $("#province").append(li)        }*/        for(var i=0;i<pac.length;i++) {            province[i] = pac[i].pac_name;            id[i] = pac[i].id;            var li ="<li value="+id[i]+" onclick='cityFun(this)'>"+ province[i]+"</li>";            $("#province").append(li)        }    });});