.querySelector() VS .createElement()

When it comes to using JavaScript to manipulate DOM, there are usually 2 types of elements someone would need to deal with, existing and non-existing. That’s where the confusion between .querySelector() and .createElement() may occur.

Let’s look at each of them individually.

.querySelector()

Is used to get existing elements from HTML in order to be able to use them in JavaScript code. To make it happen, the following steps need to be taken:

Step 1. Grab an element from HTML to make it accessible in JavaScript, using .querySelector().

For example, if there is existing <div class=“main-div”></div> element in HTML, we can grab it and make it accessible in JavaScript like this:

const mainDiv = document.querySelector(“.main-div”);

What happens here is the following:

• we’re declaring a variable mainDiv;
• we’re grabbing <div> element by it’s class name “main-div”;
• we’re assigning <div> element to the variable mainDiv.

Now variable “mainDiv” represents <div class=“main-div”></div> HTML element and can be used in JavaScript code.

Step 2. Do something with that element.

After we grabbed an element from HTML and made it available in JavaScript code, we can do whatever we want with it, for example we can add an attribute to it like this:

mainDiv.setAttribute(“draggable”, “true”);

Using .setAttribute() we’ve added a class to the <div> element. HTML representation of this element now looks like this:

<div class=“main-div” draggable=“true”></div>

.createElement()

Is used to create new HTML elements using JavaScript. To make it happen, the following steps need to be taken:

Step 1. Create a new element, using .createElement().

For example, if we need to create a <button></button> element inside the JavaScript code, we can do the following:

const deleteButton = document.createElement(“button”);

What happens here is the following:

• we’re declaring a variable deleteButton;
• we’re creating a <button> element;
• we’re assigning <button> element to the variable deleteButton.

Now variable “deleteButton” represents <button></button> HTML element and can be used in JavaScript code.

Step 2. Do something with that element.

After we created an element and made it available in JavaScript code, we can do whatever we want with it, for example we can add an attribute to it like this:

deleteButton.classList.add(“delete-button”);

Using .classList.add() we’ve added a class to the delete button. HTML representation of this element now looks like this:

<button class=“delete-button”></button>

Step 3. Append created element to HTML.

Since “deleteButton” element was just created, it needs to become part of the DOM in order to show up on the page. That’s why we need to append it to HTML, using .appendChild() or .append().

NOTE When appending 1 element we use .appendChild(element1); when we need to append 2 or more elements we use .append(element1, element2).

We can append an element to any other element like this:

mainDiv.appendChild(deleteButton);

As you may have noticed there are a few differences in steps that need to be taken when working with existing vs non-existing elements.

To put it all together in one place, here is a summary table.

.querySelector() and .createElement() comparison table.