通过数组循环创建 li 并作为列表显示到 HTML

Question

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

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

javascript：

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);
  }  
 }

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

Answer 1

虽然所有提供的答案都有效并且很好 - 它们都遇到相同的问题 - 因为它们在每次迭代时将元素附加到 DOM。对于一个小列表，这不是问题，但是如果您要处理列表中所需的大量元素 - 对 hte DOM 的不断操作将产生性能成本。

最好 (IMO) 构建 li 的单个字符串，然后当数组完全迭代时 - 使用 .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

相当简单：

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 3

您可以使用 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>

有关 reduce 的更多信息，请参见此处：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 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>