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

问题描述

问 题

菜鸟问题 如遇常识性错误还请不吝赐教。
如题 后台显示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>

解决方案

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);
  }

这篇关于javascript innerHTML插入内容没反应/内容没插入进去？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！