javascript - 通过数组循环创建 li 并以列表形式显示到 HTML

Question

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

数组:
var array = ['幻灯片 1', '幻灯片 2', '幻灯片 3', '幻灯片 4', '幻灯片 5', '幻灯片 6', '幻灯片 7', '幻灯片 8', '幻灯片 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>