Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like 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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!