jquery clone multiple times and appendTo performance

Question

I want to have an element cloned multiple times(say 4) and append them to the parent of the element.

I have written the following code in jQuery

var element = $('.element');
for (var i = 0; i < 4; i++) {
    element.clone().appendTo(element.parent());
}

Is this the right way? or any better way to do this? I read about documentfragment online and wrote the following.

var element = $('.element');
var documentFragment = $(document.createDocumentFragment());
for (var i = 0; i < 4; i++) {
    element.clone().appendTo(documentFragment);
}
element.parent().append(documentFragment);

Both works fine. Will the second one make any difference in performance?

Answer 1

Your first jQuery is good. You can check the bellow code for output.

var element = $('.element');
for (var i = 0; i < 4; i++) {
    element.parent().append(element.clone());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div class="element">fffsf<br></div>
  </div>  
</div>