javascript - IFE操作dom题目

Question

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（样例），10</li>
      <li>第二名：福州（样例），10</li> -->
  </ul>

<script type="text/javascript">

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

(function () {
window.onload =function(){
    apiData.sort(function(a,b){
            return b[1]-a[1];
    });
    var list = document.getElementById('aqi-list');
    for(var i=0;i<aqiData.length;i++){
        if(aqiData[i][1]>=60){
            list.innerHTML = '<li>第一名:' + aqiData[i][0] + ',' + aqiData[i][1] + '</li>';
        }
    }
}


})();

帮我看下哪里有问题，顺便指点下

Answer 1

list变量是ul元素，你每次if为true之后都是在给list.innerHTML重新赋值，新值把旧值覆盖了。

办法是定义一个变量，把li的内容追加到变量上，循环结束后才给list.innerHTML赋值。

Answer 2

直接上代码

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

    (function () {
        window.onload = function () {
            aqiData.sort(function (a, b) {
                return b[1] - a[1];
            });
            var list = document.getElementById('aqi-list');
            for (var i = 0; i < aqiData.length; i++) {
                if (aqiData[i][1] >= 60) {
                    list.innerHTML += '<li>第一名:' + aqiData[i][0] + ',' + aqiData[i][1] + '</li>';//用加号拼起来OK了
                }
            }
        }
    })();

建议你用js模版，这样实在太麻烦了，拼字符串效率很低的