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

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

数组：

变量数组=[‘幻灯片1’、‘幻灯片2’、‘幻灯片3’、‘幻灯片4’、‘幻灯片5’、‘幻灯片6’、‘幻灯片7’、‘幻灯片8’、‘幻灯片9’]；

javascript:

函数列表项（项）{
对于（变量i=0；i

相当简单：

var数组=[“幻灯片1”、“幻灯片2”、“幻灯片3”、“幻灯片4”、“幻灯片5”]
array.forEach（函数（项）{
var li=document.createElement（“li”）；
var text=document.createTextNode（项）；
李.附件（文本）；
文件.getElementById（“myUl”）.appendChild（li）；
});
您可以使用ES6方法减少和模板文本。您可以这样使用它们：


var数组=[“幻灯片1”、“幻灯片2”、“幻灯片3”、“幻灯片4”、“幻灯片5”、“幻灯片6”、“幻灯片7”、“幻灯片8”、“幻灯片9”]，
//Reduce将迭代所有数组项并返回单个值。
listItems=array.reduce（（结果，项目）=>{
//向当前项的结果中添加字符串。此语法使用模板文本。
结果+=`
${item}
`；
//始终在reduce回调中返回结果，它将是下一次迭代中的值或结果。
返回结果；
}, ''); // “”是空字符串，它是初始值结果。
//从DOM中获取要在其中显示列表的元素，这应该是ul或ol元素。
resultElement=document.getElementById（'result'）；
//设置内部HTML
resultElement.innerHTML=列表项
使用列表项标记作为分隔符，将数组转换为字符串。使用字符串连接（
+
）手动添加开始和结束标记。使用以下命令将字符串分配给列表元素（
ul#target
）：


var数组=[“幻灯片1”、“幻灯片2”、“幻灯片3”、“幻灯片4”、“幻灯片5”、“幻灯片6”、“幻灯片7”、“幻灯片8”、“幻灯片9]”；
target.innerHTML='
'+array.join（'
'）+'
'
虽然所有提供的答案都有效，但都存在相同的问题，因为它们在每次迭代时都会将元素附加到DOM中。对于一个小的列表，这不会是一个问题，但是如果您要处理列表中所需的大量元素，则对hte DOM的持续操作将带来性能成本

更好的做法是（IMO）构建一个li的字符串，然后当数组完全迭代时，在DOM中使用.innerHTML将字符串传递给UL。同样的结果-但更快


var slides=[“幻灯片1”、“幻灯片2”、“幻灯片3”、“幻灯片4”、“幻灯片5”]
var str='
'
幻灯片。forEach（函数（幻灯片）{
str+='
'+slide+'
'；
}); 
str+='
'；
document.getElementById（“slideContainer”）.innerHTML=str
试试这个，也可以添加到列表中


var-arr=[
Math.random（）.toFixed（2），
Math.random（）.toFixed（2），
Math.random（）.toFixed（2），
Math.random（）.toFixed（2），
Math.random（）.toFixed（2）
];
控制台日志（arr）；
var ul=document.createElement（'ul'）；
ul.className='myUL'；
document.getElementById（'container'）.appendChild（ul）；
函数myFunction（）{
//for（var i=0；iI在我发布到这里之前就有了这个功能，但它不起作用。你能指出哪里出了问题吗？``函数listItem（item）{for（var i=0；i
节点。在任何情况下，您都不会给它们任何内容。您将项目从数组分配到
列表t
变量，但在下一行，您将覆盖它并将其变为一个空的
。是的，但我想在
中添加列表。我该怎么做？哦，我只是将
更改为
。您的解决方案不必
创建元素
。我使用它做什么？嗨-我不知道我不确定你想要什么样的结构，但是当使用这种基于字符串的方法时，只需将元素添加到字符串中即可。为了演示，我将页面中的空元素更改为div，并将
和
添加到js中的字符串中，瞧，你有一个包含ul的div。好的，谢谢你的帮助。这这是一个简单的解决方案。这真的很神奇。我的意思是，我已经在angular和react项目中多次这样做了，但从来没有单独在javascript中这样做过……我对ES6知之甚少。
${item}
的意思是什么？它是一个模板文本字符串，有关更多信息，请参阅我答案中的链接。