Add class name to element(s) in jQuery
In this tutorial, you will learn how to add a class name to the element(s) using jQuery.
Solution
To add a class name to the element(s) in the document using jQuery, you can use the addClass()
method. Call the addClass() method on the element or elements, and pass the required class name.
element.addClass("my-class-name");
where you can replace the my-class-name
with the required class name.
You can also add more than one class names in the same method call, as shown in the following code.
element.addClass("class1 class2 class3");
Programs
1. In the following script, when user clicks on the button, we add the class name "title"
to the first Heading 2.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#action").click(function() {
// Select the odd indexed elements
var element = $("h2:first");
// Add class name to the element
element.addClass("title");
});
});
</script>
<style>
.title {
color: red;
border-bottom: 1px solid;
}
</style>
</head>
<body>
<h2>Hello User!</h2>
<input type="submit" id="action" value="Click Me"></input>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<p>This is fourth paragraph.</p>
<h2>Another section</h3>
<p>This is fifth paragraph.</p>
</body>
</html>
2. In the following script, when user clicks on the button, we select the even indexed paragraphs and add the class name "highlite"
to these elements.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#action").click(function() {
// Select the odd indexed elements
var elements = $("p:even");
// Add class name to the elements
elements.addClass("highlite");
});
});
</script>
<style>
.highlite {
background: yellow;
}
</style>
</head>
<body>
<h2>Hello User!</h2>
<input type="submit" id="action" value="Click Me"></input>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<p>This is fourth paragraph.</p>
<h2>Another section</h3>
<p>This is fifth paragraph.</p>
</body>
</html>
3. In the following script, when user clicks on the button, we select the first paragraph and add the class names "highlite bold"
to the element.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#action").click(function() {
// Select the first paragraph
var elements = $("p:first");
// Add class names to the element
elements.addClass("highlite bold");
});
});
</script>
<style>
.highlite {
background: yellow;
}
.bold {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Hello User!</h2>
<input type="submit" id="action" value="Click Me"></input>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<p>This is fourth paragraph.</p>
<h2>Another section</h3>
<p>This is fifth paragraph.</p>
</body>
</html>