Для цикла добавить div внутри div

Question

Привет! Я хотел спросить цикл, который сейчас есть в моем коде. Я делаю это вручную, он работает вручную

          $( '<div id="demo1" > <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[0] );         
  $( '<div id="demo2"> <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[1] );         

Но я пытаюсь сделать это, покупая функцию, пока div id demo10 это то, что я пыталсяя пытаюсь реализовать цикл for, но он не работает, показывая пустым только может кто-нибудь направить меняСпасибо

  function newdiv()
{
    var j,i;
     for (i = 0; i <= 5; i++,j=i+1) {

      $( '<div id="demo-"'+j+'"' +' > <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[i] );         

     }

}

Answer 1

Попробуйте этот код, он дает тот же вывод.

var i=0;
for (i = 1; i < 11; i++) {
if(i==1)
$("#demo").after('<div id="demo1" > <span class="value"></span> </div><br> Loading');
else{
var div = parseInt(i)-1;
$("#demo"+div).after('<div id="demo'+parseInt(i)+'" > <span class="value"></span> </div><br> Loading');
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo" ></div>

Answer 2

Я надеюсь, что приведенный ниже код решит проблему

Подробное описание

1. Поэтому, когда dom загружается, нам нужно выполнить функцию, поэтому мы вызывали функцию, используя newdiv ()

2. Теперь функция выполняется, поэтому каждый раз, когда значение i будет увеличиваться, оно будет добавлять новый элемент в элемент div, который уже находится вHTML. Мы выбираем его через имя класса, которое является test.

3. Таким образом, оно добавит новые элементы к test div

$(document).ready(function() {
  function newdiv() {
    var j, i;
    for (i = 0; i <= 5; i++, j = i + 1) {
     var appendElement = `<div id='demo-${i}'>
      <span class='value'></span>
     </div>
     <br>
     Loading`;
    $('.test').append(appendElement)
    }

  }

  newdiv();

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='test'>
hello
</div>