javascript - 一次追加 5 个 div？

Question

我的代码在下面运行，以便当我单击“.show-more”按钮时将正确的 div 附加到页面。我希望每次单击此按钮时都能附加 5 个这样的 div，但不知道该怎么做？

HTML

<div class="content-section news-preview clearfix">
    <div class="title">Title of News Article</div>
    <div class="clearfix">
        <div class="image-container">
            <img src="images/news_sample208x135.jpg" width="208" height="135">
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.</p>
        </div>
    </div>
    <a class="article-link">http://www.lintothenewsarticle.com/news/article/title-of-news-article</a>
</div>
<!-- /content-section -->
<div class="show-more-container">
    <div id="content-news-container"></div>
    <button class="btn show-more">Show 5 More</button>
</div>

jQuery

$('.show-more').click(function() {
    var contentNews = $('div.content-section:last').prop('outerHTML');

    console.log("contentNews", contentNews);

    $('#content-news-container').append(contentNews).slideDown(slow);
});

Answer 1

您可以使用 DocumentFragment以有效的方式一次性追加所有元素

$('.show-more').click(function () {
    var contentNews = $('div.content-section:last').prop('outerHTML');
    var frag = document.createDocumentFragment();
    for (var i = 0; i < 5; i++) {
      frag.appendChild($(contentNews).get(0));
    }

    $('#content-news-container').append(frag).slideDown(slow);
});

编辑: fiddle -http://jsfiddle.net/sc5585x7/