<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="mydiv" style="display:none"></div>

<script>
  var html = "<div>some<span>things</span><br>never<div>change</div></div>";
  var html2 = "some<span>things</span><br>never<div>change</div>";
  var count = 50;
  
  var uuid = 1000000;
  function fragment() {
    return "<div data-view-id='" + uuid++ + "'>" + html2 + "</div>";
  }

  function cleanup() {
   $("#mydiv").html("");
  }

</script>

Setup JS

Teardown JS

Test cases

Test #1

Title *

Async

Code *

cleanup();
for (var i = count; i--;) {
 $("#mydiv").append(fragment());
}

Test #2

Title *

Async

Code *

cleanup();
var el$ = $("#mydiv")
for (var i = count; i--;) {
  el$.append(fragment())
}

Test #3

Title *

Async

Code *

cleanup();
var allhtml = ''
for (var i = count; i--;) {
  allhtml += fragment();
}

$("#mydiv").append(allhtml)

Test #4

Title *

Async

Code *

cleanup();
for (var i = count; i--;) {
 var frag = document.createElement('div');
 frag.id = uuid++;
 frag.innerHTML = html2;
 $("#mydiv").append(frag);
}

Test #5

Title *

Async

Code *

cleanup();
for (var i = count; i--;) {
  $(document.getElementById("mydiv")).append(fragment());
}

Test #6

Title *

Async

Code *

cleanup();
for (var i = count; i--;) {
  $(document.querySelector("#mydiv")).append(fragment());
}

Test case details

Preparation Code

Test cases

Test #1

Test #2

Test #3

Test #4

Test #5

Test #6