Обновите DOM с помощью тега div вместе с классами начальной загрузки

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, который содержит классы начальной загрузки для отображения изображений в сетке.Но я не могу добавить div с классом "row".Я пытался сделать что-то, как показано во фрагменте.Ожидайте, что это будет:

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