Как создать структуру html в jQuery?

Question

У меня есть этот образец:

ссылка

КОД HTML:

<div id="container-list"></div>

КОД jQuery:

  var num = 10;
  var containerUl = $('<ul />'); 


  for(var i = 1; i <= num; i++) {
    var containerLi = containerUl.append('<li>'+ i +'</li>');
    containerLi.append(containerLi);
  }


  $('#container-list').html(containerUl);

Я хочу создать структуру HTML с функцией jQuery.

HTML структура new:

<ul>
 <li>
     <div class="qa-title">
         <h2>Bonorum et Malorum 6</h2>
     </div>
     <div class="qa-date-user">
         <span class="qa-date">10/25/2019;</span>
         <span class="qa-user">Asked by Sofia</span>
     </div>
     <div class="qa-question">
         <p><span>Q:></span>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque</p>
     </div>
     <div class="qa-answer">
         <p><span>A:</span>Merum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur</p>
     </div>
 </li>
</ul>

в принципе, я хотел бы сгенерировать 10 таких строк для заполнения моего пустого div

Кажется, сложная структура, и я делаю Не знаю, как это сделать в js.

Можете ли вы помочь мне, пожалуйста?

Спасибо

Answer 1

Этот код сохраняет li в переменную и затем помещает это HTML в контейнер-список

var num = 10;
var ul = '<ul>';

for(var i = 1; i <= num; i++) {
    ul += '<li>'+ i +'</li>';
}

ul += '</ul>';

$('#container-list').html(ul);