How To Add A Class If It Doesn’t Exist On Element Using JavaScript

When working with the element in JavaScript, sometimes you need to add a class if it doesn’t exist on the element by JavaScript. In this article, you will be introduced two methods for achieving your goal: the classList.add() method and the className property.

Add a class if it doesn’t exist on element by JavaScript

Using the classList.add() method

The easiest way to add a new class to an element when it doesn’t exist in that element using JavaScript is to use the classList.add(). This way will add the new class to an element only when it doesn’t have a class we want to add, and when the element already has the class, this method won’t add any class to the selected element.

For example:

<html>
  <body>
    <style type="text/css">
      /* Set style to class "newClass" */
      .newClass {
        background-color: Aquamarine;
      }
    </style>

    <p id="myParagraph">Learn share IT</p>
    <button onclick="addclass()">Add class</button>

    <script>
      function addclass() {
        // Select element
        var element = document.getElementById("myParagraph");

        // Add class to element
        element.classList.add("newClass");
      }
    </script>
  </body>
</html>

Output:

In the above example, we have created a function to add the “newClass” to the paragraph with id=”myParagraph”. When we click on the button for the first time, the paragraph has been added to a new class and the background changed to blue.

The classList.add() method adds the class if the element does not contain the added class, so no effect happens when we click the button a second time.

Using className property 

The className property is used to name the class attribute of an element. However, this property will overwrite the new class on the old one if the element already has those classes. Using the className property to add a new class to an element unless it exists in that element, we can check if it already has the class we want to add.

For example:

<html>
  <body>
    <style type="text/css">
      /* Set style to class "newClass" */
      .newClass {
        background-color: Aquamarine;
      }
    </style>

    <p id="myParagraph" class="class">Learn share IT</p>
    <button onclick="addclass()">Add class</button>

    <script>
      function addclass() {
        // Select element
        var element = document.getElementById("myParagraph");

        // Checking whether the element has class or not
        if (element.classList.contains("newClass")) {
          document.write("Element already exit class");
        }

        // Add class to element
        element.className = "newClass";
      }
    </script>
  </body>
</html>

Output:

In the above example, when we click the button for the first time, the element is given a new class called “newClass” and the background is changed to blue. However, when we click the button for the second time, because the element already has the class “newClass”, we can’t add that class anymore.

Summary

In this article, you learned how to add a new class to an element when it doesn’t exist in that element utilizing JavaScript in two ways. It would be best if you used the classList.add() method because it is the most accessible and fastest way, and you don’t need to do any extra steps to achieve your goal. Hope this article is helpful to you.

Leave a Reply

Your email address will not be published. Required fields are marked *