How's Virtual DOM Implementation Is Different Than CreateDocumentFragment() If No State Is Observed?

Virtual DOM is a light weight copy of DOM, maintained / cached locally before inserting it into actual DOM. We can change it as we want and then save to our real DOM tree. It uses

Solution 1:

The simplest answer is that NodeJS does(/will) not have document.createDocumentFragment, nor document.createElement or any such thing.

The point of VirtualDOM is to allow for not only large-scale edits to systems where DOM will later be injected, but also to allow for any edits in an environment where the DOM just plain does not exist.

This is the largest difference between practical application of DocumentFragments and VirtualDOM.

Added benefits in terms of specific instances of DOM virtualization would be that certain view libraries (React, say) make dealing with these things quite simple, compared to manual insertion into fragments and their children.

Solution 2:

Virtual DOM is a virtual representation of the UI tree. Its name is misleading as it's not linked to the DOM any more. Nowadays React can be used for web apps with react-dom or for mobile apps with react-native.

It's true that DocumentFragment and Virtual DOM are similar: tree like structures containing nodes with similar information. One could indeed use DocumentFragment to track changes and update the DOM when necessary. However it wouldn't be possible to use it on native development. Also the nodes will contain unnecessary properties and methods.