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

Last Updated : 08 Aug, 2024

In this article, we will learn to add a new class to an element that already has a class using jQuery. There are different methods of achieving this task using the built-in methods available in jQuery. The approaches we can use to add a class to an element using jQuery are listed below:

Table of Content

Using the addClass() method
Using the attr() method
Using the prop() method

Using the addClass() method

The addClass() method of jQuery can be used to add a class to an element. We can use the addClass() method by passing the name of the class that has to be added as a parameter in the form of a string and it will add that class to the selected element.

Syntax:

$('element_selector').addClass(className);

Example: The below example will explain the practical use of the addClass() method to add a class.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .GFG1 {
            font-weight: bold;
        }

        .GFG2 {
            font-size: 24px;
            color: green;
        }
    </style>

    <!-- Import jQuery cdn library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </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, A computer science portal
    </p>

    <button>Click to Add class</button>
</body>

</html>

Output:

Using the attr() method

We can also use the attr() method and add the class attribute to the selected element. But, we have to set the value of this attribute using a callback function which allow us to access the previous value of the same attribute and add a new value to the previous value.

Syntax:

$('element_selector').attr('class', (i, prevClass)=>{});

Example: The below example will illustrate the use of the attr() method to add a new class to the selected element.

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <style> 
        .GFG1 {  
            font-weight: bold; 
        } 

        .GFG2 { 
            font-size: 24px; 
            color: green;
        } 
    </style> 

    <!-- Import jQuery cdn library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 

    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                $("p").attr("class", (i, prevClass)=>{
                    return prevClass + " 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, A computer science portal 
    </p> 

    <button>Click to Add class</button> 
</body> 

</html>

Output:

Using the prop() method

The prop() method of jQuery can also be used to add a new class to the selected element in the same way as we used the attr() method by passing a callback function to set the new value of the passed property.

Syntax:

$('element_selector').prop('class', (i, prevClass)=>{});

Example: This example implements the prop() method to add the class to a element.

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <style> 
        .GFG1 {  
            font-weight: bold; 
        } 

        .GFG2 { 
            font-size: 24px; 
            color: green;
        } 
    </style> 

    <!-- Import jQuery cdn library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 

    <script> 
        $(document).ready(function () { 
            $("button").click(function () { 
                $("p").prop("class", (i, prevClass)=>{
                    return prevClass + " 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, A computer science portal 
    </p> 

    <button>Click to Add class</button> 
</body> 

</html>

Output:

How to apply css property to a child element using JQuery?

vkash8574

Improve

Article Tags :

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

Using the addClass() method

Using the attr() method

Using the prop() method

Similar Reads

Thank You!

What kind of Experience do you want to share?