Menu
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 );
452
With React Fragment, you can render multiple elements of a component without adding extra div tags. We can write cleaner, more readable code with React Fragments. It takes up less memory and renders components faster. Each component is rendered as expected.
React Fragment is a component exposed by React which serves as a parent component in JSX but doesn't add anything to the DOM. The div element on the other hand is an HTML element with no semantic meaning but when used, will be added to the DOM as a node.
The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document.
React fragments serve as a cleaner alternative to using unnecessary divs in our code. These fragments do not produce any extra elements in the DOM, which means that a fragment's child components will render without any wrapping DOM node.
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.
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).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.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>
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>
element if you only want to insert one element (with other elements inside it).element if you want to parse html in text format using innerHTML.document-fragment if you want to insert multiple adjacent elements.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
