带有将数组值添加到网页列表中的函数的javascript数组

Question

我是一个正在学习JavaScript的学生。 我正在做一个简单的任务，创建一个数组，创建一个将数组值添加到列表的函数。 这是我的代码附件。 在我的javascript for语句中，我添加了“ document.write（places [i] +”
“）;”，但这仅显示值列表。 它没有显示在我的网页的ul部分中。 您能帮忙更正这一行代码吗？ 任何帮助，将不胜感激。

<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>
//array storing places to display
var places = ["Atlanta", "Nashville", "Dallas", "Los Angeles", "Miami"];

// function to generate list from array
function processPlaces() {
    var liElements = document.getElementsByTagName('li');
    for (var i = 0; i < 5; i++) { 
        // write each array element in places to its corresponding list item in liElements
        document.write(places[i] + "<br />");
    }
}
</script>
</body>
</html>

Answer 1

您可以使用javascript和数组做一些很酷的事情。

因此，您已经在上面有了基本的for循环，但是这里有一些技巧。

for (var i = 0; i < places.length; i++)

在此示例中，您不必知道数组的长度。 由于数组的索引为零，因此它将迭代0到数组的最后一项（在您的情况下为4）。

现在，您的html可以删除所有<li>标记，并将开头<ul>更改为<ul id="places-list"></ul>

不用担心它是空的，您将填充它。

使用代码集创建新元素并将其附加到DOM。

for (var i = 0; i < places.length; i++) {
  var listItem = document.createElement("li"); //creates new <li>
  var output = places[i]; //saves value of array at this index
  listItem.appendChild(output); //appends array value to <li>
  document.getElementById("places-list").appendChild(listItem); //appends <li> to <ul>
}

您无需将此循环包装在函数中，除非您计划随后调用该函数，例如processPlaces();

我很高兴您正在学习，并且随着工作的继续，事情会变得容易得多。 然后，当您学习jQuery时，这变得更加容易。

编辑以回应评论：

如果您不想按书面形式更改html，只需将代码更改为以下内容：

    for (var i = 0; i < places.length; i++) {
        var listItem = document.getElementById("item" + i); //grabs relevant <li>
        var output = places[i]; //saves value of array at this index
        listItem.appendChild(output); //appends array value to <li> as is
    }

Answer 2

在for循环中的索引i处设置liElement .innerHTML

for (var i = 0; i < 5; i++) { 
// write each array element in places to its corresponding list item in liElements
  liElements[i].innerHTML = places[i] + "<br />"
}

Answer 3

您可以使用以下代码片段在HTML中使用数组列表创建新的<ul>元素。

 <html>
  <body>
  <header>
<h1>
Hands-on Project 3-3
</h1>
  </header>
     <article>
   <h2>Scouting Locations</h2>
    <div id="results">
    <div id="renderList"></div>
  </div>
 </article>
<script>
(function(){
var ul = document.createElement('ul');
ul.setAttribute('id','proList');

var t, tt;
places = ["Atlanta", "Nashville", "Dallas", "Los Angeles", "Miami"];

document.getElementById('renderList').appendChild(ul);
places.forEach(renderplacesList);

function renderplacesList(element, index, arr) {
    var li = document.createElement('li');
    li.setAttribute('class','item');

      ul.appendChild(li);

    t = document.createTextNode(element);

    li.innerHTML=li.innerHTML + element;
  }
 })();
 </script>
 </body>
</html>

带有将数组值添加到网页列表中的函数的javascript数组

问题描述

3 个解决方案

解决方案1
1 2017-02-11 05:32:01

解决方案2
0 2017-02-11 05:23:29

解决方案3
0 2017-02-11 05:47:34

带有将数组值添加到网页列表中的函数的javascript数组

问题描述

3 个解决方案

解决方案1 1 2017-02-11 05:32:01

解决方案2 0 2017-02-11 05:23:29

解决方案3 0 2017-02-11 05:47:34

解决方案1
1 2017-02-11 05:32:01

解决方案2
0 2017-02-11 05:23:29

解决方案3
0 2017-02-11 05:47:34