[JS]动态添加内容

选自百度前端学院任务十四：零基础JavaScript编码（二）

学习目的

学习JavaScript中的if判断语法，for循环语法
学习JavaScript中的数组对象
学习如何读取、处理数据，并动态创建、修改DOM中的内容

学习任务

参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <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 () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */

})();

</script>
</body>
</html>

任务分析

初看题目，主要是两个方面的问题：一个是读取列表并过滤排序；另一个是将合适数据数据显示在 <ul id="aqi-list"></ul> 里。

过滤和排序

JS数组过滤可以用 Array filter() 方法。题目要求是空气质量指数大于60的城市，所以 fitlter() 方法如下：

1
2
3

aqiData.filter(function(value){
      return value[1]>60;
  })

数组排序可以使用简单的冒泡排序，为了简化代码，可以用 JavaScript sort() 方法。题目要求是从高到低，所以 sort() 所用里用的函数应该是 return b[1]-a[1]; 。

1
2
3

array.sort(function(a,b){
      return b[1]-a[1];
  })

获取 DOM 元素对象并设置元素的内容

获取DOM元素对象的方法有多样，常用的有 getElementById() 、 getElementsByName()、 getElementsByTagName() 。

getElementById()
通过标签id获取，如本题目获取 <ul id="aqi-list"> 对象：document.getElementById("aqi-list") 。
document.getElementsByName()
要注意的是Elements是复数的，因为 Documnent中每一个元素的ID是唯一的，但NAME却可以重复。该方法所获得的是对象数组，可用数组获取元素的方法获取某一个对象，如： getElementsByName("docname")[0] 即访问第一个对象。
getElementsByTagName()
通过标签名来获取的，同 getElementsByName() 一样，获取的是对象数组，本题中只有一对 <ul> 标签，所以可以用 document.getElementsByTagName("ul")[0] 获得与 document.getElementById("aqi-list") 同样的效果。

任务结果和代码

任务结果

污染城市列表

显示完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <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 () {

  /*
  在注释下方编写代码
  遍历读取aqiData中各个城市的数据
  将空气质量指数大于60的城市显示到aqi-list的列表中
  */
  var str="";
  var pos=["一","二","三","四","五","六"];
  var outputData=aqiData.filter(function(value){
      return value[1]>60;
  }).sort(function(a,b){
      return b[1]-a[1];
  });
  outputData.forEach(function(value,index){
      str+="<li>第"+pos[index]+"名："+value[0]+"，"+value[1]+"</li>";
  });
  document.getElementById("aqi-list").innerHTML=str;

})();

</script>
</body>
</html>