Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



Before Click the Button:

After Click Button:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :