The task is to add a new class to the element without using addClass() method with the help of jQuery. There are two approaches that are discussed below:
Approach 1: To perform the operation, we can use toggleClass() method to toggle the class which we want to add to the element.
-
Example:
<!DOCTYPE HTML><html><head><title>How to add class to an element withoutaddClass() method in jQuery ?</title><scriptsrc=</script><style>#el {background: green;}.newClass {color: white;}</style></head><bodystyle="text-align:center;"><h1style="color:green;">GeeksForGeeks</h1><pid="GFG_UP"></p><pid="el">This is the element</p><buttononclick="GFG_Fun()">Click Here</button><pid="GFG_DOWN"></p><script>var el_up = document.getElementById('GFG_UP');var el_down = document.getElementById('GFG_DOWN');el_up.innerHTML = "Click on the button to "+ "perform the operation.";function GFG_Fun() {$('#el').toggleClass('newClass');el_down.innerHTML = "Class has been added";}</script></body></html> -
Output:
Approach 2: We can also use attr() method and prop() method to add a new attribute ‘class’ to the element.
-
Example:
<!DOCTYPE HTML><html><head><title>How to add class to an element withoutaddClass() method in jQuery ?</title><scriptsrc=</script><style>#el {background: green;}.newClass {color: white;}</style></head><bodystyle="text-align:center;"><h1style="color:green;">GeeksForGeeks</h1><pid="GFG_UP"></p><pid="el">This is the element</p><buttononclick="GFG_Fun()">Click Here</button><pid="GFG_DOWN"></p><script>var el_up = document.getElementById('GFG_UP');var el_down = document.getElementById('GFG_DOWN');el_up.innerHTML = "Click on the button to "+ "perform the operation.";function GFG_Fun() {$('#el').attr('class', 'newClass');el_down.innerHTML = "Class has been added";}</script></body></html> -
Output: