The **`addClass()` method** adds one or more class names to selected HTML elements. This method helps with changing the CSS properties of these HTML elements at a later stage. However,
it does not remove existing class attributes; instead, it adds only one or more class names to the existing class attribute.

# Syntax

# Code
The following example​ demonstrates the use of the `addclass()` function. Upon clicking the button, the `newclass` class gets assigned to it, thus, changing the button's CSS properties.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
        </script>
        <script>
        $(document).ready(function(){
        // Add the class to the button when it is clicked
        $("#mybutton").click(function(){
            $("#mybutton").addClass("newclass");
            $("#mybutton").html('New Class Added');
        });
        });
        </script>
        <style>
        /* Properties of the new class that will
           be added when the button is clicked. */
        .newclass{
            background-color:#4F6677;
            border: #2e6da4;
            font-family: Arial, Geneva, Arial, Helvetica,  sans-serif;
            font-size: 15px;
            color: #FFFFFF;
            letter-spacing: 1px;
            padding: 8px 12px;
            font-size: 14px;
            font-weight: normal;
            border-radius: 4px;
            line-height: 1.5;
            text-decoration:none;
        } 
        </style>
    </head>
    <body>
        <button id="mybutton">Add Class to this button</button>
    </body>
</html>



// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

What is the addclass() method in jQuery?

The addClass() method in jQuery adds one or more class names to selected HTML elements, enhancing their CSS properties.