Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Class to Last Paragraph Element using jQuery
jQuery is a well-known JavaScript library that makes it easier to manipulate HTML elements, handle events, and carry out numerous operations on web pages. Adding or changing HTML element classes can also be done using jQuery.
Using it, we can easily add a new class to the last paragraph element. Let's dive into the article to learn more about adding a class to the last paragraph element using JQuery. This can be done by using the addclass() method and append() methods. Let's discuss them one by one.
jQuery addclass() method
One or more class names are added to the chosen items by the addClass() method. The only change made by this method is the addition of one or more class names to the class attribute; no existing class attributes are removed. Use spaces to divide the class names if you want to add more than one.
Syntax
Following is the syntax for addclass() method
$(selector).addClass(classname,function(index,currentclass))
In combination with this we will use the jQuery last() method which is used to return the last element of the selected elements.
Example
Following is the example, where we are going to implement addclass() method along with last() method and adding a class.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.tutorial {
color: #DE3163;
font-size: 20px;
font-family: verdana;
}
body {
background-color: #E8DAEF;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green;"> TUTORIALSPOINT </h1>
<p>WELCOME..!</p>
<button>CLICK</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").last().addClass("tutorial");
});
});
</script>
</body>
</html>
When we execute the above script, it will generate an output consisting of the text along with a click button. When the user clicks the button, the event gets triggered and the change is made to the paragraph text, which is the last element.
jQuery append() method
jQuery's append() method enables you to add stuff, such HTML elements or text, to the end of the specified element. It is particularly helpful because there are many situations where you need to add information instantly, like in response to a specific user action.
Syntax
Following is the syntax for jQuery append() method
$(selector).append(content,function(index,html))
Example
Let's look at the following example, where we are going to add the class to the last element using the append() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body {
font-family: verdana;
text-align: center;
color: #DE3163;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h2>Welcome To</h2>
<button id="tutorial">Click!</button>
<script>
$(document).ready(function() {
$("#tutorial").click(function() {
$("h2").append(" TutorialsPoint.!");
});
});
</script>
</body>
</html>
On executing the above code, the output window will pop up, displaying the text along with a click button on the webpage. When the user clicks the button, the event gets triggered, and text is added to the end of it.
102 Views
