How to make a div using loop in JavaScript?

Question

I have to make a div triangle like this, with looping in JavaScript. Anyone know how to make this?

*Input using <select> tag. Thanks!

Open Image

Have you made an attempt to solve the problem yourself? Show us what you've done already. — gyre, Mar 17 '17 at 06:00
Possible duplicate of [Create
and append
dynamically](http://stackoverflow.com/questions/14004117/create-div-and-append-div-dynamically) — Sam Chahine, Mar 17 '17 at 06:00
This can be done easily, but you should not take answer of your academic exercise here. — Akshay, Mar 17 '17 at 06:04
At least post your attempt here, right or wrong doesn't matter. — divy3993, Mar 17 '17 at 06:08

score 1 · Accepted Answer · answered Mar 17 '17 at 06:54

Check this

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
    <script>
        $(document).ready(function () {
           
            var container = $("#html2");
            $("#CreateDiv").change(function () {
                $('#html2').html('');
              
                var strBlocksHTML = '';

               
                var selectedvalue = $("#CreateDiv option:selected").val();
                for (var i = 0; i <= selectedvalue; i++) {
                    for (var n = 0; n < i ; n++) {
                        strBlocksHTML += '<div id="pdfDiv" style=" background-color:red;  display:inline-block;   width:50px;      height:50px;       margin:2px 5px;     border:2px solid #ccc;">  </div>';
                     
                    }
                    strBlocksHTML += '<div></div>';
                     
                                      
                }

           
                $('#html2').append(strBlocksHTML);
            })

        });

    </script>
</head>

<body style="text-align:center">
    <div>
        <select id="CreateDiv">
            <option value="0"> Select</option>
            <option value="1"> One</option>
            <option value="2"> Two</option>
            <option value="3"> There</option>
            <option value="4"> Four</option>
            <option value="5"> Five</option>
        </select>
    </div>
<br />
    <br />

    <div id="html2" style="text-align:center">

    </div>

   
  

</body>
  </html>

score 0 · Answer 2 · answered Mar 17 '17 at 06:05

Simple double loop. First loop for rows, second for single div.

var levels = 5;
var output = '';

for (var row = 1; row <= levels; row++) {
  output += '<div class="row">';
  for (var i = 0; i < row; i++) {
    output += '<div class="item"></div>'
  }
  output += '</div>';
}

document.write(output);

.row {
text-align: center;
}

.item {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid green;
  background: gray;
}

How to make a div using loop in JavaScript?

2 Answers2