createDocumentFragment() used in a for loop

Question

Is createDocumentFragment() doing anything in the code below?

I\'m trying to adapt this code. I\'m not sure how it works and the for loo

Answer 1

The purpose of the document fragment in this code is to temporarily remove the table from the DOM.

1. move table from DOM to fragment
2. perform operations on table
3. move the table from fragment back to DOM

This approach uses only two DOM manipulations for the fragment (steps 1 and 3). It lets us skip all the re-flows that would have been required for Step 2.

Each DOM manipulation operation (e.g. adding a row to an in-DOM table) causes a page re-flow (the web-browser re-calculates, and re-draws the page). When performing multiple DOM manipulation operations sequentially (e.g. adding multiple rows), it is unnecessary to have a re-flow after each operation. Only after the entire process, the page should re-flow. In order to achieve this, we have to temporarily detach the table from the DOM, by moving it into a fragment. Elements that are off-DOM don't cause re-flows.