How to create repeated HTML with Javascript for loop?

Question

I'm trying to create the following html dynamically with JS, but couldn't quite make the loop work.

I'll receive the count value (ie: 1, 2, 3, etc.) from a user input.

<div class='outer-1'>
    <div class='inner-1'></div>
</div>
<div class='outer-2'>
    <div class='inner-1'></div>
    <div class='inner-2'></div>
</div>
<div class='outer-3'>
    <div class='inner-1'></div>
    <div class='inner-2'></div>
    <div class='inner-3'></div>
</div>
........

This is what I've so far:

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i +"'>";
    html += "<div class='inner"-"+ i +"'></div>";
    html += "</div>";
}

That code only prints like below.

<div class='outer-1'>
    <div class='inner-1'></div>
</div>
<div class='outer-2'>
    <div class='inner-2'></div>
</div>

Answer 1

You need an inner loop to generate the contents of each outer <div> .

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i + "'>";
    for (var j = 1; j <= i; j++) {
        html += "<div class='inner-" + j + "'></div>";
    }
    html += "</div>";
}

Answer 2

You need a for loop within a for loop:

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i +"'>";
    for (var j = 1; j <= i; j++)
        html += "<div class='inner-"+ j +"'></div>";
    html += "</div>";
}

Answer 3

You need to use an outer and an inner loop:

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i +"'>";

    for (var j = 1; j <= i; j++) {
        html += "<div class='inner"-"+ j +"'></div>";
    }

    html += "</div>";
}

Answer 4

you need a new loop for the inside divs like this :

var count=3;
var html = '';

for (var i = 1; i <= count; i++) 
{
  html += "<div class='outer-"+ i +"'>" + "\n";

 var inHtml = '';
 for (var j = 1; j <= i; j++) 
  {
    inHtml += "<div class='inner-"+ j +"'></div>" + "\n";
  }

html += inHtml;
html += "</div>" + "\n";
}