Создание списка HTML с помощью цикла в Javascript
У меня есть массив в 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>
но это не работает, так как вы, кажется, не можете вызвать результат сценария в середине сценария? Или я просто ошибся, я не уверен. Любая помощь была бы замечательной!
изменить: забыл точку с запятой
Ах, это имеет смысл, мне было интересно, почему я не могу вернуть это обратно. Спасибо, это решает!
Возможный дубликат как напечатать htmlString в цикле с помощью jquery
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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 записями, прежде чем проходить через него.
Для списков следует использовать элемент списка (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);
}
var res = $('.result2').html();