Append loaded 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)
  })
})

Append loaded HTML 多次

Append loaded HTML multiple times

html

javascript

ajax

jquery

jquery-load