javascript innerHTML插入内容没反应/内容没插入进去？

Question

菜鸟问题 如遇常识性错误还请不吝赐教。
如题 后台显示liSpan.innerHTML 有内容 但是 页面不显示貌似<span>标签也是空的，说明没插入进去啊？
是否 代码里获取到的 “span” 不等于 HTML 的<span>?

<h3>污染城市列表</h3>
  <ul id="aqi-list">  
    <li>
      第一名：<span></span><i></i>
    </li>
    <li>
      第二名：<span></span><i></i>
    </li>
    <li>
      第三名：<span id="abc"></span><i></i>
    </li>
    <li>
      第四名：<span></span><i></i>
    </li>
    <li>
      第五名：<span></span><i></i>
    </li>
    <li>
      第六名：<span></span><i></i>
    </li>
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["广州", 50],
  ["成都", 90],
  ["西安", 100]
];

for (var i =0 ; i < aqiData.length; i++) {
  //console.log(aqiData[i]);
  for (var j = i+1; j< aqiData.length; j++) {
    var temp = aqiData[i]
    if (aqiData[i][1] < aqiData[j][1]) {
      aqiData[i] = aqiData[j]
      aqiData[j] = temp
    }
  }
}//排序
document.write(aqiData);
var tag = document.getElementById('aqi-list');
var liGroup = tag.getElementsByTagName('li');//获取 li 标签
console.log(liGroup);
  for (var i = 0; i < liGroup.length; i++) {
    liSpan = liGroup[i].getElementsByTagName("span");//获取 span 标签
    console.log(liSpan);
    liSpan.innerHTML = aqiData[i][0];
    console.log(liSpan.innerHTML);
  }
alert(document.getElementById("abc").innerHTML)
</script>

Answer 1

for (var i = 0; i < liGroup.length; i++) {
    liSpan = liGroup[i].getElementsByTagName("span");//获取 span 标签
    console.log(liSpan);
     //   liSpan.innerHTML = aqiData[i][0];    liSpan是一个集合,liSpan[0]是取到的这个dom元素
     liSpan[0].innerHTML = aqiData[i][0];
    console.log(liSpan.innerHTML);
  }

Answer 2

首先第一个，排序搞复杂了，试试sort方法(可以查找sort方法的使用).
然后是getElementsByTagName得到的是数组(可以去了解下getElementByTagName)。

最后，鼓励多练多写，多解决问题！

多说一句，学习js最好是从jQuery开始，先会用，才会有兴趣，接着再了解原理(工作学习才这样要求，个人业余时间不做这样的要求，看个人兴趣)。

祝好运！