javascript - jquery多次clone和appendTo性能

Question

我想要多次克隆一个元素(比如 4 次)并将它们附加到该元素的父元素。

我用 jQuery 编写了以下代码

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

这是正确的方法吗？或者有更好的方法来做到这一点？我在网上阅读了有关 documentfragment 的内容并编写了以下内容。

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

两者都工作正常。第二个会对性能产生任何影响吗？

Answer 1

你的第一个 jQuery 很好。您可以检查以下代码的输出。

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>