I've searched through stackoverflow questions and found few questions about the same topic, but none of them has an extensive answer I'm looking for. Most answers are focused around performance, but I'm looking for other differences as well. Basically, this one sums up the question succinctly:

if I create an element (a for example) in a variable but DO NOT APPEND IT TO THE DOM, add elements (divs, tables, etc ) and stuff and after all the work has been done (loops, validations, styling of elements), that element is appended, is it the same as a fragment?

I've decided to give it a shot once again and see if anyone can give a good answer.

So, why would I want to use this:

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
fragment.appendChild( divContainer );
document.getElementById("someElement").appendChild( fragment.cloneNode(true) );

instead of this:

var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
document.getElementById("someElement").appendChild( divContainer );

I've searched through stackoverflow questions and found few questions about the same topic, but none of them has an extensive answer I'm looking for. Most answers are focused around performance, but I'm looking for other differences as well. Basically, this one sums up the question succinctly:

if I create an element (a for example) in a variable but DO NOT APPEND IT TO THE DOM, add elements (divs, tables, etc ) and stuff and after all the work has been done (loops, validations, styling of elements), that element is appended, is it the same as a fragment?

I've decided to give it a shot once again and see if anyone can give a good answer.

So, why would I want to use this:

var fragment = document.createDocumentFragment();
var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
fragment.appendChild( divContainer );
document.getElementById("someElement").appendChild( fragment.cloneNode(true) );

instead of this:

var divContainer = document.createElement("div");
var divHeader = document.createElement("div");
divContainer.appendChild( divHeader );
document.getElementById("someElement").appendChild( divContainer );

• javascript
• html
• dom

Share Improve this question Follow edited May 23, 2017 at 10:30 CommunityBot 111 silver badge asked Jul 4, 2016 at 9:07 Max KoretskyiMax Koretskyi 106k6868 gold badges353353 silver badges516516 bronze badges 5

• 2 @JamesThorpe, I've updated my questions with Most answers are focused around performance, but I'm looking for other differences as well. – Max Koretskyi Commented Jul 4, 2016 at 9:13
• it's not the same since the fragment doesn't exist in the DOM, or I missed the question – caub Commented Jul 4, 2016 at 9:16
• 1 What is the question? What differences are you looking for? An element not added to the DOM is only a variable in memory and not rendered by the browser. What else do you want to know? – Esko Commented Jul 4, 2016 at 9:19
• 1 I think you should post your own question about the doubt you have. – Charlie Commented Jul 4, 2016 at 9:20
• @CharlieH, updated the question – Max Koretskyi Commented Jul 4, 2016 at 9:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Both methods are largely the same, as they can both be used to store elements without modifying the DOM immediately. There are a few catches though.

Differences:

• A div has the prototype chain HTMLDivElement - HTMLElement - Element - Node - EventTarget, whereas a document-fragment has DocumentFragment - Node - EventTarget. This means a div has more methods and properties available (like innerHTML).
• When appending a div to the DOM, the whole element is inserted, the variable still references to the element. Appending a document-fragment inserts all its contents, leaving the variable to reference an empty fragment.

Usage document-fragment:

var fragment = document.createDocumentFragment();
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');

fragment.appendChild(div1);
fragment.appendChild(div2);
div2.appendChild(div3);              //fragment now contains the sub-tree

document.body.appendChild(fragment); //fragment is now an empty document-fragment, and is not in the DOM.

Result:

<body>
    <div></div>       <!--div1-->
    <div>             <!--div2-->
         <div></div>  <!--div3-->
    </div>
</body>

Usage div:

var container = document.createElement('div');
var div1 = document.createElement('div');
var div2 = document.createElement('div');
var div3 = document.createElement('div');

container.appendChild(div1);
container.appendChild(div2);
div2.appendChild(div3);               //container is now a div with the sub-tree inside.

document.body.appendChild(container); //container is still the div with the sub-tree, but is now in the DOM.

Result:

<body>
    <div>                 <!--container-->
        <div></div>       <!--div1-->
        <div>             <!--div2-->
             <div></div>  <!--div3-->
        </div>
    </div>
</body>

In short:

• Use an element if you only want to insert one element (with other elements inside it).
• Use an element if you want to parse html in text format using innerHTML.
• Use a document-fragment if you want to insert multiple adjacent elements.