Jquery Multi Clone

Clone Jquery element without inserting after each clone.

by Aubrey Taylor

HTML

<h2>Attempt 1</h2>
<ul class="clone-list">
    <li class="to-clone">I'm a clone!</li>
</ul>

<h2>Attempt 2</h2>
<ul class="clone-list-2">
    <li class="to-clone-2">I'm a clone 2!</li>
</ul>

JavaScript

// Utils ----------------------------------------------
repeatString = function(str, count) {
    var result = new Array(++count).join(str);
    return result;
}
$.fn.outerHtml = function() {
    var result = $('<div>').append(this.clone()).html();
    return result;
}
$.fn.repeat = function(count) {
    var str = $(this).outerHtml(),
        strResult = repeatString(str, count),
        result = $(strResult);
    
    return result
}

// Atempt #1 -----------------------------------------------
var orig = $('.to-clone'),
    parent = $('.clone-list'),
    origHtml = orig.outerHtml(),
    numItems = 5,
    i = 0,
    html = '';

for(i; i < numItems; i++) {
    html = html + origHtml   
}

parent.append(html);

// Attempt #2 -----------------------------------------------
var parent2 = $('.clone-list-2'),
    template2 = $('.to-clone-2'),
    count = 5;

parent2.append(template2.repeat(count));