Skip to content
Related Articles

Related Articles

Improve Article

How to add a new class to an element that already has a class using jQuery ?

  • Last Updated : 31 Dec, 2020

In this article, we will learn to add a new class to an element that already has a class using jQuery. To add a new class, we use jQuery addClass() method. The addClass() method is used to add more classes and their attributes to each selected element. It can also be used to change the property of the selected element.

Syntax:

$(selector).addClass(className);

Parameters: It accepts a parameter “className”, the name of the new class that is to be added.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .GFG1 {
            color: green;
            font-weight: bold;
        }
  
        .GFG2 {
            font-size: 24px;
        }
    </style>
  
    <!-- Import jQuery cdn library -->
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").addClass("GFG2");
            });
        });
    </script>
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        How to add a new class to an element that
        <br>already has a class using jQuery?
    </h3>
  
    <p class="GFG1">
        GeeksforGeeks computer science portal
    </p>
  
    <button>Click Here!</button>
</body>
  
</html>

Output:



Before Click the Button:

After Click Button:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :