Question

我正在学习javaScript，我想循环数组并以列表形式显示HTML。我怎么能这样做？

阵列： var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'];

的javascript：

＆＃13;

function listItem(item){
  for (var i = 0; i < item.array.length; i++){
    var list = item.array[i];
    
    list = document.createElement('li');
    document.getElementByClass('box').appendChild(list);
    
    console.log(list);
  }  
 }

＆＃13;

<div class ="box"><ul></ul></div>

＆＃13;

Answer 1

虽然所有提供的答案都可以正常工作 - 但它们都有同样的问题 - 因为它们会在每次迭代时将元素附加到DOM。使用一个小列表这不会是一个问题，但是如果你在列表中处理大量的元素 - 对hte DOM的持续操作会产生性能成本。

构建li的单个字符串要好得多（IMO）然后当数组完全迭代时 - 使用.innerHTML将字符串传递给UL - 在DOM中单个操作。结果相同 - 但速度更快。

var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = '<ul>'

slides.forEach(function(slide) {
  str += '<li>'+ slide + '</li>';
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;

<div id="slideContainer"></div>

Answer 2

您可以使用ES6方法reduce和模板文字。您可以像这样使用它们：

var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'],
  // Reduce will iterate over all the array items and returns a single value.
  listItems = array.reduce((result, item) => {
    // Add a string to the result for the current item. This syntax is using template literals.
    result += `<li>${item}</li>`;
    
    // Always return the result in the reduce callback, it will be the value or result in the next iteration.
    return result;
  }, ''); // The '' is an empty string, it is the initial value result.
  // Get the element from the DOM in which to display the list, this should be an ul or ol element.
  resultElement = document.getElementById('result');

// Set the inner HTML
resultElement.innerHTML = listItems;

<ul id="result"></ul>

有关缩减的详细信息，请参阅此处：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce。如果您想了解有关模板文字的更多信息，请点击此处：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 3

相当简单：

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]

array.forEach(function(item) {
  var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  document.getElementById("myUl").appendChild(li);
});

<ul id="myUl"></ul>

此代码执行以下操作：

对于数组的每个项目：
1. 制作新的<li>
2. 使用数组
3. 将文字附加到<li>
4. 将<li>附加到<ul>

如果你使用jQuery，这一切都变得简单了：

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
array.forEach(function(item) {
  $("#myUL").append("<li>" + item + "</li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myUL">
</ul>

编辑：如果你想使用普通for循环而不是forEach，你可以这样做：

var array = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"];
for (i = 0; i < array.length; i++) {
  var li = document.createElement("li");
  var text = document.createTextNode(array[i]);
  li.appendChild(text);
  document.getElementById("myUl").appendChild(li);
}

<ul id="myUl"></ul>

这段代码的唯一区别是，我们不是使用内置的forEach方法遍历数组并对每个元素执行操作，而是手动循环遍历数组的索引。

Answer 4

使用Array#join并使用列表项标签作为分隔符将数组转换为字符串。使用字符串连接（+）手动添加开始和结束标记。使用Element#innerHTML：

将字符串分配给列表元素（ul#target）

var array = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', 'Slide 8', 'Slide 9'];

target.innerHTML = '<li>' + array.join('</li><li>') + '</li>';

<ul id="target"></ul>

Answer 5

尝试一下，也可以添加到列表中

var arr = [
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2),
  Math.random().toFixed(2)
];

console.log(arr);
var ul = document.createElement('ul');
ul.className = 'myUL';
document.getElementById('container').appendChild(ul);

function myFunction() {
     
    // for(var i =0;i<5;i++){
    //   arr.push(Math.random().toFixed(2));
    // }
  create(arr);
}

function create(arr){
  arr.forEach(function(data){
  var li = document.createElement('li');
  ul.appendChild(li);
  li.innerHTML  += data;
  li.className = "myList";
});
}create(arr);

#container .myUL{
  padding:0px;
}

#container .myUL .myList {
  list-style-type: none;
  border:1px solid grey;
  padding:5%;
  border-radius:5px;
  margin:4px;
}
.click{
  width:80px;
  height:30px;
  border-radius:5px;
  color:#fff;
  background:#323232;
  font-size:15px;
    
}

 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- create a ul li using js  -->

  <button class="click" onclick="myFunction()">Click Me</button>
<div id="container"></div>
</body>
</html>

从循环到数组创建li并以列表形式显示到HTML

5 个答案: