在 Javascript 中使用循环创建 HTML 列表答案

【问题标题】：Creating HTML list using loop in Javascript在 Javascript 中使用循环创建 HTML 列表
【发布时间】：2018-06-14 14:01:19
【问题描述】：

我有一个 Javascript 数组，我想打印到屏幕上，它是：（我的 ro[j] 函数在这个例子中被简化了，但这没关系）

<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>

但这不起作用，因为您似乎无法在脚本中途调用脚本的结果？或者我只是犯了一个错误，我不确定。任何帮助都会很棒！

编辑：忘记分号

【问题讨论】：

var res = $('.result2').html();
啊，有道理，我想知道为什么我不能'反馈它。谢谢，解决了它！
how to print htmlString in loop with jquery的可能重复

标签： javascript jquery html arrays

【解决方案1】：

列表元素（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);
}

【讨论】：

【解决方案2】：

这会将数字垂直放置在屏幕上。

<!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>

【讨论】：

这看起来很尴尬，你应该在循环之前设置 ro 有 49 个条目。