Creating HTML list using loop in Javascript

Question

I've got an array in Javascript that I want to print to screen which is: (my function for ro[j] is simplified in this example, but that doesn't matter)

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

But this doesn't work as I think it keeps replacing the div with each loop rather than adding to the div. Is there a good way to implement this? I thought you could try something like this:

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

but this doesn't work since you can't seem to call the result of the script midway through the script? Or I just made a mistake, I'm not sure. Any help would be great!

edit: forgot a semicolon

Ah that makes sense, I was wondering why I couldn't' feed it back in. Thanks, that solves it! — Ben Gooding
– Ben Gooding, Commented Jun 14, 2018 at 14:09
Possible duplicate of how to print htmlString in loop with jquery — Heretic Monkey
– Heretic Monkey, Commented Jun 14, 2018 at 14:09

Stefan · Accepted Answer · 2018-07-02 20:01:37Z

0

A list element (ul or ol) should be used for lists as it's more semantically correct:

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

Using es6 syntax you can append elements to that list like this:

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);
}

edited Jul 2, 2018 at 20:01

answered Jul 2, 2018 at 19:52

Stefan

3,0811 gold badge24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hepic Hepic · Accepted Answer · 2018-06-14 14:10:49Z

-1

This will place the numbers vertically in the screen.

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

answered Jun 14, 2018 at 14:10

Hepic Hepic

1321 silver badge3 bronze badges

1 Comment

Stefan Over a year ago

This seems very awkward, you should setup ro with 49 entries before looping through it.

Collectives™ on Stack Overflow

Creating HTML list using loop in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related