通过数组创建li from循环，并以列表的形式显示到HTML
我正在学习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>
回答 4
Stack Overflow用户
发布于 2017-09-10 22:42:50
虽然所有提供的答案都很好，但它们都有相同的问题，每次迭代都会将元素附加到DOM中。对于一个很小的列表，这不是一个问题，但是如果你正在处理大量你想要在列表中的元素--对DOM的不断操作将会有性能损失。
最好(IMO)构建一个li字符串，然后在DOM中通过单个操作完全迭代数组-使用.innerHTML将字符串传递给UL。同样的结果--但速度更快。
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>
Stack Overflow用户
发布于 2017-09-10 21:55:45
您可以使用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
Stack Overflow用户
发布于 2017-09-10 21:56:37
使用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>
https://stackoverflow.com/questions/46141450
复制相似问题