如何使用 getElementById 和 innerHTML 将此数组制作成列表？

Question

我需要使数组 'places' 在列表中显示其内容。我的问题是我的功能。我知道我做的不对。谁能帮忙？我需要使用 getElementsByTagName 吗？

<body>
      <header>
        <h1>
           Hands-on Project 3-3
        </h1>
      </header>

      <article>
        <h2>Scouting Locations</h2>
        <div id="results">
            <ul>
               <li id="item1"></li>
               <li id="item2"></li>
               <li id="item3"></li>
               <li id="item4"></li>
               <li id="item5"></li>
            </ul>
        </div>
      </article>
      <script>
   
      var places = ["Philadelphia", "New York", "Los Angles", "Austin", "Kansas City"];
    
      function processPlaces() {
       for (i = 0, i < 5, i++) {
        var listItem = "item" + (i + 1);
        document.getElementById(listItem).innerHTML = places[i]; 
      
       }
      }
    
      if (window.addEventListener) {
     window.addEventListener("load", processPlaces, false);
      } else if (window.attachEvent) {
     window.attachEvent("onload", processPlaces);
      }
    
      </script>
      </body>

Answer 1

你可以获取包含 div results 并创建一个 ul 像这样 var locations = $('<ul>') 然后创建一个循环遍历你的数组并在每次迭代中创建的函数a li 及其内容，然后将其附加到 ul，最后将 ul 附加到容器 div。这是 jQuery 中的粗略版本。 JS 中的相同概念略有不同的语法。

var results = $('#results');
var list = $('<ul>');

function processPlaces() {
      for (i = 0; i < 5; i++) {
          var listItem = $('<li>');
          listItem.text(places[i]); 
          list.append(listItem);
      }
     results.append(list);
  }

这种动态方法可能更好，这样当您向数组添加内容时，您不需要返回到 html 并每次手动添加更多 li。

Answer 2

您的问题是您在 for 循环中使用逗号 , 而不是分号 ;：

for (i = 0, i < 5, i++) {

应该是：

for (var i = 0; i < 5; i++) {

注意：我插入了var关键字，因为最好在循环内声明变量，避免在全局上下文中隐式声明i。

Answer 3

纯正解:

可以通过 <div>:

的 id 访问列表项

<div id="results">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

访问列表 children:

var results = document.getElementById("results");
var lists = results.children[0].children;

Lists 是一个包含所有 <li> 元素的 HTML 集合 。访问全部 <li>:

for(var i = 0; i < lists.length; i += 1) {
    lists[i].innerHTML = places[i];
}

Example

如何使用 getElementById 和 innerHTML 将此数组制作成列表？

How do I make this array into a list using getElementById and innerHTML?

javascript

arrays

html-lists