Add a class if it doesn't exist on Element using JavaScript

avatar

Borislav Hadzhiev

Thu Dec 30 20212 min read

banner

Photo by Ian Dooley

Add a class if it doesn't exist on Element using JavaScript #

To add a class if it doesn't already exist on an element, select the element and pass the class name to the classList.add() method, e.g. box.classList.add('bg-yellow'). The add() method will omit any classes that are already present on the element.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .bg-yellow { background-color: yellow; } </style> </head> <body> <div id="box">Box 1</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); box.classList.add('bg-yellow');

We selected the element using the document.getElementById() method.

We used the classList.add method to add a class if it doesn't already exists to the element.

If a class is already present on the element, it will be omitted. The add() method only adds classes that are not already contained in the element's class list.

You can test this by duplicating the line that adds the class and inspecting the element.

index.js
const box = document.getElementById('box'); box.classList.add('bg-yellow'); // ๐Ÿ‘‡๏ธ has no effect, because class already exists box.classList.add('bg-yellow');

You can use the add() method to add as many classes as necessary to the element and only the classes that are not already present on the Node will get added.

index.js
const box = document.getElementById('box'); box.classList.add( 'bg-yellow', 'second-class', 'third-class' );

Similarly, if you need to remove a class only if it exists on the element, you can use the classList.remove() method.

index.js
const box = document.getElementById('box'); box.classList.add( 'bg-yellow', 'second-class', 'third-class' ); box.classList.remove( 'second-class', 'third-class', 'example' );

If the provided class does not exist on the element, the remove() method does not throw an error, instead it simply ignores the class.

Note that the classList.add() method has to be called on a DOM element, so if you have a collection of elements you need to add a class to, you have to iterate over the collection and call the method on each node.

Here is the HTML for the next example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .bg-yellow { background-color: yellow; } </style> </head> <body> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const boxes = document.querySelectorAll('.box'); for (const box of boxes) { box.classList.add('bg-yellow', 'second-class', 'third-class'); box.classList.remove('second-class', 'third-class', 'example'); }

We used the document.querySelectorAll method to select all of the DOM elements that have a class of box.

To iterate over the elements, we use the for...of loop and added a class to each element in the collection.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee