Does jQuery use create document fragment inside each loops?

Question

So I've read that jQuery uses document fragments internally to make rendering faster. But I am wondering if anyone knows if jQuery would use createDocumentFragment in this situation where I'm appending img elements to the DOM using the each loop?

var displayArray = []; // Lots of img elements

$.each(displayArray, function()
{
    $('#imgSection').append(this);
});

Or would I need to use this code in order to reduce the number of browser reflows?

var displayArray = []; // Lots of img elements
var imgHolder = $('<div/>');

$.each(displayArray, function()
{
    imgHolder.append(this);
});

$('#imgSection').append(imgHolder);

Also, the displayArray is populated by other code, not shown here, that creates img elements based off of paths in a JSON file.

Thank you for any advice.

Answer 1

Why all the looping to add elements?

$('#imgSection').append("<div>" + displayArray .join("") + "</div>");

Okay so it is elements.

The quickest way is going to be using append with the array itself.

$("#out").append(elems);

other option using one div to append is

var div = $("<div/>").append(elems);
$("#out").append(div);

BUT appending a lot of images at once is going to be bad unless they are preloaded. That will be a bunch of http requests being queued up.

jsPerf test cases