如何在 JavaScript 中使用循环制作 div？答案

【问题标题】：How to make a div using loop in JavaScript?如何在 JavaScript 中使用循环制作 div？
【发布时间】：2017-03-17 05:58:23
【问题描述】：

我必须制作一个像这样的 div 三角形，并在 JavaScript 中循环。有人知道怎么做吗？

*使用<select> 标签输入。谢谢！

【问题讨论】：

您是否尝试过自己解决问题？向我们展示您已经完成的工作。
Create <div> and append <div> dynamically的可能重复
这很容易做到，但你不应该在这里回答你的学术练习。
至少在这里发布你的尝试，对错无所谓。

标签： javascript loops

【解决方案1】：

检查一下

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

【讨论】：

【解决方案2】：

简单的双循环。行的第一个循环，单个 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;
}

【讨论】：