How to add class to an element without addClass() method in jQuery?

jQuery Web Development Front End Technology

We can use the .attr() method to add a class to an element. This method can be used to set or get the value of an attribute on an HTML element. To add a class, we first select the element using a jQuery selector, and then call the .attr() method, passing in "class" as the first argument and the class name as the second argument.

Let us first understand what jQuery is. jQuery is a JavaScript library that simplifies HTML document traversing, event handling, and animation. It allows for easy manipulation of the Document Object Model (DOM).

It also provides several shorthand methods for common JavaScript tasks, such as making AJAX requests. It is widely used in web development to create interactive and dynamic user interfaces. It can be easily integrated with other libraries and frameworks.

Approach

In jQuery, you can add a class to an element by using the addClass() method, but you can also use the attr() or prop() method to add a class to an element.

For example −

$("#element").attr("class", "new-class");

$("#element").prop("class", "new-class");

This will add the class "new-class" to the element with the ID "element".

You can also chain multiple class names together using the += operator

$("#element").attr("class", function(i, origValue){
   return origValue + " new-class";
});

Example

Here is a complete example of adding a class "new-class" to an element with the ID "element" without removing any existing classes −

<!DOCTYPE html>
<html>
<head>
   <title>Adding Class</title>
</head>
<body>
   <div id="element" class="existing-class">This is an element</div>
   <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
   <script>
      $(document).ready(function(){
         $("#element").attr("class", function(i, origValue){
            return origValue + " new-class";
         });
      });
   </script>
</body>
</html>

In this example, we have an HTML element with the ID "element" and class "existing-class". When the document is ready, we select the element using jQuery's $("#element") selector and use the attr() method to add the class "new-class" to the existing classes on the element.

You can check on browser dev tools the class of the element would be "existing-class new-class".

AmitDiwan

Updated on: 10-Apr-2023

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started