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 (i.e: 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>

Jeremy Roman · Accepted Answer · 2011-07-31 22:53:36Z

4

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

answered Jul 31, 2011 at 22:53

Jeremy Roman

16.3k1 gold badge45 silver badges44 bronze badges

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

1 Comment

Jeremy Roman Over a year ago

You're welcome; glad to be of service. It looks like you're new to Stack Overflow. First, welcome, and second, if an answer solves your problem it is customary to accept it. This both marks it as correct, and also provides some reputation to the user that posted it. Many users are more likely to answer questions by people who take the time to accept an answer, so this helps you as well. Cheers!

Kevin Ji · Accepted Answer · 2011-08-01 00:16:16Z

3

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

edited Aug 1, 2011 at 0:16

Kevin Ji

10.5k4 gold badges43 silver badges65 bronze badges

answered Jul 31, 2011 at 22:54

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

Kaken Bok · Accepted Answer · 2011-07-31 23:00:55Z

0

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

edited Jul 31, 2011 at 23:00

answered Jul 31, 2011 at 22:55

Kaken Bok

3,3851 gold badge21 silver badges21 bronze badges

Comments

pit · Accepted Answer · 2011-07-31 23:03:48Z

0

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

answered Jul 31, 2011 at 23:03

pit

6336 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to create repeated HTML with Javascript for loop?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related