Добавление загруженного HTML несколько раз

Question

У меня есть раздел HTML, который находится в отдельном файле, который я хочу загрузить на текущую страницу, и добавляю несколько раз к div.

Любая комбинация из for и append и clone представляется только добавлением одного экземпляра HTML.

Внешний HTML

<article class="article"> 
    <section class="section"> 
     <h1>Title</h1> 
    </section> 
</article> 

JQuery

function loadContent() { 
    var instances = 2; 
    var list = $('<section id="list-view">'); 
    var downloads = $('#downloads'); 

    downloads.empty(); 
    list.load('filename.html .card', function() { 
     for (var i = 0; i < instances; i++) { 
      downloads.append(list); 
     } 
    }); 
} 

loadContent(); 

HTML

<article id="downloads"></article> 

Результат я пытаюсь достичь

<article id="downloads"> 
    <section id="list-view"> 
     <article class="article"> 
      <section class="section"> 
       <h1>Title</h1> 
      </section> 
     </article> 
     <article class="article"> 
      <section class="section"> 
       <h1>Title</h1> 
      </section> 
     </article> 
     <article class="article"> 
      <section class="section"> 
       <h1>Title</h1> 
      </section> 
     </article> 
    </section> 
</article> 

Answer 1

Я бы использовал регулярный $.get() для извлечения внешнего HTML, а затем в цикле добавьте его:

$.get("filename.html").then(function(data) { 
    $(data).find(".card").each(function() { 
    downloads.append(this.innerHTML) 
    }) 
})