JavaScript-动态迭代创建html

我正试图用一种方法编写一个构造函数，该方法循环若干行（数值参数），然后对每一行循环若干点（数值参数）。在两个循环中的每一个循环中，都会呈现一部分html。我可以得到要呈现的第一部分html，但当我尝试使用之前呈现的html中的选择器循环第二部分时，什么也没有发生。我错过了什么

HTML代码

<div class="container">
   <h1 class="heading">Random Colors</h1>
   <div class="row">
       <div id="frame" class="col-xs-12">
           <!-- CONTENT PUSHED BY JAVASCRIPT -->     
       </div>  
   </div><!-- Ends .row -->  
</div><!-- Ends .container -->

var ColorDots = function(rows, dots) {
    this.numOfRows = rows;
    this.numOfDots = dots;
    this.renderDots();

};

ColorDots.prototype.renderDots = function() { 

    this.rowTemplate = '<div class="color-dot row"></div>';
    this.iconTemplate = '<i class="fa fa-circle icon" aria-hidden="true"></i>';     

    for ( var r = 0; r < this.numOfRows; r++) {

        document.getElementById('frame').innerHTML += this.rowTemplate;

        for ( var i = 0; i < this.numOfDots; i++) {

            document.getElementsByClassName('color-dot').innerHTML += this.iconTemplate;
        }            
    }    
};

随机颜色

JAVASCRIPT代码

<div class="container">
   <h1 class="heading">Random Colors</h1>
   <div class="row">
       <div id="frame" class="col-xs-12">
           <!-- CONTENT PUSHED BY JAVASCRIPT -->     
       </div>  
   </div><!-- Ends .row -->  
</div><!-- Ends .container -->

var ColorDots = function(rows, dots) {
    this.numOfRows = rows;
    this.numOfDots = dots;
    this.renderDots();

};

ColorDots.prototype.renderDots = function() { 

    this.rowTemplate = '<div class="color-dot row"></div>';
    this.iconTemplate = '<i class="fa fa-circle icon" aria-hidden="true"></i>';     

    for ( var r = 0; r < this.numOfRows; r++) {

        document.getElementById('frame').innerHTML += this.rowTemplate;

        for ( var i = 0; i < this.numOfDots; i++) {

            document.getElementsByClassName('color-dot').innerHTML += this.iconTemplate;
        }            
    }    
};

var ColorDots=函数（行、点）{
this.numorrows=行；
this.numofots=点；
this.renderDots（）；
};
ColorDots.prototype.renderDots=函数（）{
this.rowTemplate=''；
this.iconTemplate=''；
对于（var r=0；r

解决方案（仅限javascript）

var ColorDots=函数（行、点）{
//性质
this.numofots=点；
this.numorrows=行| | 1；
this.iconHtml=''；
这个.renderRows（）；
};    
ColorDots.prototype.renderRows=函数（）{
this.rowHtml=''；
对于（var r=0；r

---

谢谢@rainer为我的问题提供了答案。然而，在考虑了@shilly在评论中关于在for循环中使用

.innerHTML

的内容后，我对代码做了一些修改，以反映他的建议。希望这对其他尝试做类似事情的人有用。

首先，css类是彩色点，而不是选择器中的彩色点

其次，getElementsByCLassName返回一个数组。所以这里必须使用索引

ColorDots.prototype.renderDots = function() { 
  this.rowTemplate = '<div class="color-dot row"></div>';
  this.iconTemplate = '<i class="fa fa-circle icon" aria-hidden="true"></i>';     

  for ( var r = 0; r < this.numOfRows; r++) {

    document.getElementById('frame').innerHTML += this.rowTemplate;
    for ( var i = 0; i < this.numOfDots; i++) {
      document.getElementsByClassName('color-dots')[r].innerHTML += this.iconTemplate;
    }            
  }    
};

ColorDots.prototype.renderDots=function（）{
this.rowTemplate=''；
this.iconTemplate=''；
对于（var r=0；r

getElementsByClassName

正在返回一个元素数组。所以

innerHTML

将无法工作。您必须遍历返回的元素。旁注：尽量避免在循环中设置innerHTML。将所有元素附加到一个字符串，并在字符串完成后执行一次innerHTML。这将极大地增加渲染时间，因为你会看到很多行。@Shilly，谢谢你的建议。我在问题中添加了一个修改后的代码示例，反映了你的评论，当然它可以满足我的需要。谢谢，我知道我必须在某个时候迭代集合，我只是弄不清楚什么时候，地点和方式。你的建议很有帮助。