如何在Javascript中使用循环创建HTML列表?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (518)

我在Javascript中有一个数组,我想打印到屏幕上,它是:

<div class="result2"></div>
<script>
  var j;
  var ro = [0];
  for(j=0; j <= 49; j++){
    ro[j] = j;
    $('.result2').html(ro[j]);
  }
</script>

但这是行不通的,因为我认为它总是用每个循环替换div,而不是添加到div中。有什么好办法来实现这一点吗?我以为你可以试试这样的方法:

<div class="result2"></div>
<script>
  var j;
  var ro = [0];
  for(j=0; j <= 49; j++){
    ro[j] = j;
    if(j==0){
      $('.result2').html(ro[j]);
    }else{
      var res = $('.result2').val();
      $('.result2').html(res + ro[j]); 
    }
  }
</script>

但这不起作用,我该怎么办?

提问于
用户回答回答于

列表元素(ul或ol)应该用于列表,因为它在语义上更正确:

<ul id="result2"></ul>

使用ES6语法,你可以将元素追加到该列表中,如下所示:

const ro = [...Array(49).keys()]; // Just setting up a sample array

for (r of ro) {
  let li = document.createElement('li');
  li.innerHTML = r;
  document.getElementById('result2').appendChild(li);
}
用户回答回答于

将数字垂直放置在屏幕上:

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    <div class="result2"></div>
    <script type='text/javascript'>
        var ro = [];

        for (var j = 0; j <= 49; j++) {
            ro.push(j);
            $('.result2').append(ro[j] + '<br />');
        }
    </script>
</body>
</html>

扫码关注云+社区

领取腾讯云代金券