createDocumentFragment vs createElement
Written byPhuoc Nguyen
22 Sep, 2023
When you're creating new elements in the DOM, there are two methods that come in handy:
`createElement`. Although both methods have their place in web development, they serve different purposes.
To create a new element node, you can use the
`createElement`method. Simply pass in the name of the element you want to create as an argument. For example, to create a new
`div`element, you would use
Once you've created the element, you can add it to the DOM using methods like
`insertBefore`. These methods make it easy to add your new element exactly where you want it to go.
`createDocumentFragment`method creates a new document fragment node. This type of node is lightweight and can hold other nodes. It's perfect when you need to create a group of nodes that isn't part of the main DOM tree.
Here's an example of how to use
`createDocumentFragment`to insert multiple nodes:
// Create a new document fragmentconst fragment = document.createDocumentFragment();// Create three new paragraph elementsconst p1 = document.createElement('p');const p2 = document.createElement('p');const p3 = document.createElement('p');// Add some text to the paragraphsp1.textContent = 'This is the first paragraph.';p2.textContent = 'This is the second paragraph.';p3.textContent = 'This is the third paragraph.';// Append the paragraphs to the fragmentfragment.appendChild(p1);fragment.appendChild(p2);fragment.appendChild(p3);// Get a reference to the parent element you want to add the paragraphs toconst parentElement = document.getElementById('my-container');// Add the fragment to the parent elementparentElement.appendChild(fragment);
In this example, we create a new
`documentFragment`and three new
`paragraph`elements. We then add some text content to each of these paragraphs and append them all to our
`documentFragment`. Finally, we get a reference to our parent element and append our
`documentFragment`containing all three paragraphs at once.
Using document fragments is a great way to boost performance when adding multiple nodes to the DOM. Instead of adding each node one by one, you can group them together in a document fragment, and then add the fragment to the DOM. This can be faster because it only triggers one reflow instead of many.
Check out this tip for more details.
When you add a document fragment to the DOM, it's like it disappears. The child nodes of the document fragment are inserted into the DOM where you put the fragment, but the fragment itself is not inserted. It still exists, but it has no children.
On the other hand, when you create an element and append it to the DOM, both the element and its children are appended.
To put it simply, when using a document fragment, only the children are added to the DOM.
Do you have any questions about front-end development? If so, feel free to reach out to me on Twitter or create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
Use forwardRef with a higher-order component
05 Dec, 2023
Swap items in a sortable list
04 Dec, 2023
Display a placeholder in a sortable list
03 Dec, 2023
Create a sortable list
02 Dec, 2023
Build a drop zone for file uploads
01 Dec, 2023
Read the content of the dropped file
30 Nov, 2023
Preview images before uploading them
29 Nov, 2023
Build a drop file indicator
28 Nov, 2023
Create your own ghost element
27 Nov, 2023
Customize the appearance of a ghost element
26 Nov, 2023
An introduction to HTML 5 drag and drop
25 Nov, 2023
Use a custom drag handle
24 Nov, 2023
Create a linear gauge with discrete values
22 Nov, 2023
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.