L5_JavascriptJquery/L5-HTMLPage5.html at master · cpjohnso/L5_JavascriptJquery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>JavaScript DOM manipulation</title>
  <script>
    function showCities() {
      var cities = ["Tampa", "Valrico", "New York", "Bangalore"];

      var ulElement = document.getElementById("cityList");

      for (var city in cities) {

        var cityListItem = document.createElement("li");
        var cityListItemtext = document.createTextNode(cities[city]);
        cityListItem.appendChild(cityListItemtext);

        var listItem = ulElement.appendChild(cityListItem);

      }
    }
  </script>
</head>

<body onload="showCities()">
  <h1>JavaScript DOM manipulation</h1>

  <ul id="cityList"></ul>
</body>

</html>