createDocumentFragment vs createElement
Written byPhuoc Nguyen
Created
22 Sep, 2023
Category
DOM
When you're creating new elements in the DOM, there are two methods that come in handy:
`createDocumentFragment` and `createElement`. Although both methods have their place in web development, they serve different purposes.#createElement
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 `createElement('div')`.Once you've created the element, you can add it to the DOM using methods like
`appendChild` or `insertBefore`. These methods make it easy to add your new element exactly where you want it to go.#createDocumentFragment
The
`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:js
// Create a new document fragment
const fragment = document.createDocumentFragment();
// Create three new paragraph elements
const p1 = document.createElement('p');
const p2 = document.createElement('p');
const p3 = document.createElement('p');
// Add some text to the paragraphs
p1.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 fragment
fragment.appendChild(p1);
fragment.appendChild(p2);
fragment.appendChild(p3);
// Get a reference to the parent element you want to add the paragraphs to
const parentElement = document.getElementById('my-container');
// Add the fragment to the parent element
parentElement.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.
#The distinction
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.
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to 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 ⚡
Newsletter 🔔
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.
Phước Nguyễn