window.onload = function () {
    var oUl = document.getElementById("music");
    var arrLi = oUl.getElementsByTagName("li");
    var oSpan = oUl.getElementsByTagName("span");
    var oI= oUl.getElementsByTagName('i');
    var arrCol = ["#F7FFFF","#fff"];
    var arrName = ["私奔","北京北京","我爱你中国","花火","回来","爱要有你才完美"];
    var arrSinger = ["梁博","梁博,黄勇","梁博","梁博","梁博","梁博,那英"];
    var len = arrName.length;
    var str = "";

    for(var i = 0; i < len; i++){
        str  += '<li><input type="checkbox"><i></i><span></span></li>';
    }
    oUl.innerHTML = str;
    for(var i = 0; i < len; i++){
        arrLi[i].style.backgroundColor = arrCol[i%arrCol.length];
    }
    for(var i = 0; i < len; i++) {
        oI[i].innerHTML = arrName[i];
        oSpan[i].innerHTML = arrSinger[i];
    }
}

这个是拿题主写的代码改正之后可以实现功能的。。

主要要注意的地方就是oUl.getElementsByTagName("span")[0]选中的是oUl中的第一个span标签，所以明显是不符合题主需求的，oUl.getElementsByTagName("span")是选中oUl中所有的span标签，然后再在循环中依次给span标签赋值即可。。其余同理。。

oSpan和oI应该是数组，不该是单个元素。

修改了四行代码，注释标明了。

window.onload = function () {
            var oUl = document.getElementById("music");
            var arrLi = oUl.getElementsByTagName("li");
            var oSpan = oUl.getElementsByTagName("span"); // delete [0]
            var oI = oUl.getElementsByTagName("i");  // delete [0]
            var arrCol = ["#F7FFFF","#fff"];
            var arrName = ["私奔","北京北京","我爱你中国","花火","回来","爱要有你才完美"];
            var arrSinger = ["梁博","梁博,黄勇","梁博","梁博","梁博","梁博,那英"];
            var len = arrName.length;
            var str = "";

            for(var i=0;i<len;i++){
                str  += '<li><input type="checkbox"><i></i><span></span></li>';
            }
            oUl.innerHTML = str;
            for(var i=0;i<len;i++){
                arrLi[i].style.backgroundColor = arrCol[i%arrCol.length];
            }
            for(var i=0;i<len;i++) {
                oI[i].innerHTML = arrName[i]; // change oI -> oI[i]
                oSpan[i].innerHTML = arrSinger[i]; // change oSpan -> oSpan[i]
            }
        }