通过数组循环创建 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>

原文由 user4219935 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 gavgrif 发布，翻译遵循 CC BY-SA 3.0 许可协议