如何使用getElementById和innerHTML将此数组放入列表中？

我需要让数组的'位置'在列表中显示其内容。我的问题是我的功能。我知道我做得不对。谁能帮忙？我需要使用getElementsByTagName吗？如何使用getElementById和innerHTML将此数组放入列表中？

<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> 
 
    
 
    \t var places = ["Philadelphia", "New York", "Los Angles", "Austin", "Kansas City"]; 
 
    \t 
 
    \t function processPlaces() { 
 
    \t \t for (i = 0, i < 5, i++) { 
 
    \t \t \t var listItem = "item" + (i + 1); 
 
    \t \t \t document.getElementById(listItem).innerHTML = places[i]; 
 
    \t \t \t 
 
    \t \t } 
 
    \t } 
 
    \t 
 
    \t if (window.addEventListener) { 
 
    \t \t window.addEventListener("load", processPlaces, false); 
 
    \t } else if (window.attachEvent) { 
 
    \t \t window.attachEvent("onload", processPlaces); 
 
    \t } 
 
    \t 
 
     </script> 
 
     </body>

来源

2015-09-30 Olympus

更改逗号分号在'for'循环：'用于（I = 0; I <5;我++）'。 –

另外，请确保声明所有变量。你还没有声明我，所以它可能踩到一个全局变量。尽可能使用element.textContent代替element.innerHTML。速度更快，因为它不需要解析标签或特殊字符。 – elmonty

您的问题是你使用逗号,代替分号;在for循环：

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

它应该是：

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

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

来源

2015-09-30 21:06:09 Buzinas

哦jeez我是一个假人。它现在适用于我。 – Olympus

感谢您的帮助 – Olympus

@Olympus如果我的回答对您有用，请点击upvote/downvote箭头下方的'V'标记为已接受的标记。看看这样做也会使你获得2点声望点！ :) – Buzinas

你可以抓住包含div results和创建ul这样var locations = $('<ul>')，然后创建一个通过你数组，每个迭代循环内创建一个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的各一次。

来源

2015-09-30 21:03:57 HolyMoly

纯净朴素的解决方案：

人们可以通过<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是HTML集合与所有<li>元素。访问所有<li>：

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

Example

来源

2015-09-30 21:56:04 Sun

如何使用getElementById和innerHTML将此数组放入列表中？

回答

相关问题