javascript - jquery克隆多次和appendTo性能

Question

我想多次克隆一个元素（比如 4 次）并将它们附加到元素的父级。

我在 jQuery 中编写了以下代码

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

这是正确的方法吗？或任何更好的方法来做到这一点？我在网上阅读了有关文档片段的信息并写了以下内容。

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>