DOM Reflow

Dave McFarland, I would really like to hear from the man himself on this one.

I can see why you do things the HTML-string-building way, but I had a question about the performance of vanilla javaScript and jQuery DOM manipulation methods.

TL; DR before we start: Does the statement "var newElement = document.createElement();" cause reflow? Not when "someElement" is appended to the document somewhere, but when it is simply created and later modified before appending?

Let's start with Vanilla.

If I create a variable right before my for loop,

var photosUL = document.createElement("ul");

Then within my for loop:

1. create (using the same method) <li>, <a>, and <img> elements,
2. use vanilla JS methods to modify those elements as needed (add attribute, add class)
3. append those elements to photosUL

And finally, after the for loop, the last step: Append the photosUL to the #photos div using vanilla JS append or inner HTML method.

Will this, at any point before the last step, cause a DOM reflow? Does the document.createElement cause a reflow because it is operating on the document? Or does it not cause a reflow, because no actual appending is going on, just an element being created?

I am sure, based on what I've read, that the last step will cause a reflow, but I am not sure about the steps before. The elements that I create and modify are in the document object even though they aren't yet appended and showing anywhere on the page. Thus, my confusion about when a DOM reflow really happens.

And for jQuery: same concept, except this time creating a disembodied jQuery objects, like $("<ul></ul>"), instead of document.createElement, and using jQuery methods to manipulate and append instead of vanilla. Would that cause less reflow than the vanilla way? (If document.createElement() and modifications to disembodied elements created this way do cause reflow, then I am guess that jQuery will be more performance friendly!)

I know both ways result in a more complex code, but I was curious about the performance implications of creating disembodied elements, both in vanilla JS and jQuery, and exactly where DOM reflow occurs. A few Google searches didn't yield any direct answers to this specific question, so I figured it best to ask here.