利用js给li标签添加序号

来源:互联网 发布:unity3d opencv 编辑:程序博客网 时间:2024/05/23 01:58
<style type="text/css">
body{ font-size:14px;}
ul{ list-style:none;line-height:1.8em}
span{font-size:9px;margin-right:5px;font-family:Tahoma;color:#fff;border:1px solid #f30;background-color:#f60;padding:0 1px;line-height:10px;}
</style>
<body>
<ul id="target">
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
<li>利用js给获取的li标签添加序号</li>
</ul>
<script>
function setSN(e){
    var ul = document.getElementById(e);
    var lis= ul.getElementsByTagName('li');
    for(var i=0,l=lis.length;i<l;i++){
        var tHTML = lis[i].innerHTML
        lis[i].innerHTML = '<span>0'+(i+1)+'</span>'+tHTML;
    }
}
setSN('target');
</script>
</body>