createDocumentFragment vs createElement

Written byPhuoc Nguyen

Created

22 Sep, 2023

#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:

// 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.

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

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 🥷.

Ask me questions

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