Клонировать ОДИН РАЗ и добавить ОДИН РАЗ!
ПРИМЕЧАНИЕ: Я прочитал ваши требования как «Клонировать 50 раз за клик»
$(function() {
$("button").on("click", function(e) {
e.preventDefault(); // cancel click or make type="button"
const clones = new Array(50);
// Cloning ONCE and saving the output as string
const html = $("p").map(function() { return this.cloneNode(true).outerHTML }).get().join("");
// fill the array of HTML
clones.fill(html)
$("body").append(clones.join("")); // append ONCE
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
Для клонирования по щелчку вы можете использовать шаблон
Обратите внимание, я поставил счетчик на кнопку
$(function() {
$("button").on("click", function(e) {
e.preventDefault(); // cancel click or make type="button"
let times = +$(this).data("times"); // get a counter
if (times > 5) return
const html = $("template").contents().clone(true);
$("body").append(html); // append ONCE
$(this).data("times",++times);
}).click()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</template>
<button data-times="1">Clone all p elements, and append them to the body element</button>