使用 div 标签和引导类更新 DOM

Question

 for (i = 0; i < 10; i++) {
if(i%4===0){
            $("#image-album").append('<div class="row">');
          }
          
          $("#image-album").append('<div class="col-md-3">image '+i+'</div>')
         
          if(i!==0 && (i+1)%4===0){
            $("#image-album").append('</div>');
          }
          };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>

我想用 jquery 更新我的 dom，其中包含引导类以在网格中显示图像。但我无法添加带有“行”类的 div。我试图做一些如 sn-p 所示的事情。 期望它是：

<div class="row">
 <div class="col">
  image 1
 </div>
 <div class="col">
  image 2
 </div>
 <div class="col">
  image 3
 </div>
 <div class="col">
  image 4
 </div>
</div>

但它最终是：

<div class="row"></div>
<div class="col">
  image 1
</div>
<div class="col">
  image 2
</div>
<div class="col">
  image 3
</div>
<div class="col">
  image 4
</div>

Answer 1

首先，构建完整的 HTML，然后附加到 span

let htlm ="";
for (i = 0; i < 10; i++) 
{

    if(i%4===0)
    {
       htlm +='<div class="row">';
    }
    htlm +='<div class="col-md-3">image '+i+'</div>';
    if(i%4===3)
    {
       htlm +='</div>';
    }
        
};
$("#image-album").append(htlm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<span id="image-album">
</span>