Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the href attribute for a hyperlink using jQuery?
The jQuery attr() method is used to change the href attribute for hyperlinks. This method can both get and set attribute values for HTML elements. Changing href attributes is particularly useful when you need to update URLs dynamically, such as converting HTTP links to HTTPS or modifying URLs based on user interactions.
Syntax
Following is the syntax to get an attribute value
var value = $(selector).attr("attributeName");
Following is the syntax to set an attribute value
$(selector).attr("attributeName", "newValue");
Getting Current href Value
To retrieve the current href value of a hyperlink, use the attr() method with the attribute name
var currentUrl = $(this).attr("href");
Setting New href Value
To set a new href value, pass both the attribute name and the new value
$(selector).attr("href", "https://www.newurl.com");
Converting HTTP to HTTPS Links
A common use case is converting HTTP links to HTTPS for security. Here's how to process the URL
var httpUrl = $(this).attr("href");
var httpsUrl = httpUrl.replace("http://", "https://");
$(this).attr("href", httpsUrl);
Example Basic href Change
Following example demonstrates how to change a single link's href attribute
<!DOCTYPE html>
<html>
<head>
<title>Change Single Link</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Link Example</h2>
<p><a id="myLink" href="http://www.example.com">Example Website</a></p>
<button onclick="changeLink()">Change to HTTPS</button>
<script>
function changeLink() {
var currentUrl = $("#myLink").attr("href");
var newUrl = currentUrl.replace("http://", "https://");
$("#myLink").attr("href", newUrl);
alert("Link changed to: " + newUrl);
}
</script>
</body>
</html>
When you click the button, the link's href changes from HTTP to HTTPS and displays an alert with the new URL.
Example Converting Multiple Links
Following example shows how to change href attributes for multiple hyperlinks automatically
<!DOCTYPE html>
<html>
<head>
<title>Convert HTTP to HTTPS Links</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="http://"]').each(function(){
var httpUrl = $(this).attr("href");
var httpsUrl = httpUrl.replace("http://", "https://");
$(this).attr("href", httpsUrl);
});
});
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTTP to HTTPS Conversion</h2>
<p>All links below are automatically converted from HTTP to HTTPS:</p>
<p><a href="http://www.tutorialspoint.com">Tutorialspoint</a></p>
<p><a href="http://www.tutorialspoint.com/market/index.asp">Tutorialspoint Courses</a></p>
<p><a href="http://www.tutorialspoint.com/latest/ebooks">Tutorialspoint EBooks</a></p>
<p><a href="http://www.tutorialspoint.com/questions/index.php">Tutorialspoint QA</a></p>
</body>
</html>
This code automatically finds all links starting with "http://" and converts them to "https://" when the page loads.
Example Dynamic URL Modification
Following example demonstrates changing href attributes based on user input
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Link Modification</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Link Changer</h2>
<p><a id="dynamicLink" href="https://www.example.com">Dynamic Link</a></p>
<input type="text" id="newUrl" placeholder="Enter new URL" style="width: 300px; padding: 5px;">
<button onclick="updateLink()">Update Link</button>
<p id="status"></p>
<script>
function updateLink() {
var newUrl = $("#newUrl").val();
if (newUrl.trim() !== "") {
$("#dynamicLink").attr("href", newUrl);
$("#status").text("Link updated to: " + newUrl);
} else {
$("#status").text("Please enter a valid URL");
}
}
</script>
</body>
</html>
Users can enter a new URL in the input field and click the button to update the link's href attribute dynamically.
How It Works
The jQuery attr() method works by accessing the DOM element's attribute and either retrieving its current value or setting a new one. When used with href attributes:
Getting href:
$(selector).attr("href")returns the current URL as a stringSetting href:
$(selector).attr("href", newURL)updates the link destinationBatch processing: Use
.each()to modify multiple links simultaneouslySelector targeting: Use attribute selectors like
a[href^="http://"]to target specific link patterns
Common Use Cases
Following are the common scenarios where changing href attributes is useful
Security upgrades: Converting HTTP links to HTTPS for secure connections
Dynamic navigation: Updating links based on user preferences or application state
URL parameter modification: Adding tracking parameters or session information to existing links
Domain switching: Redirecting links from development to production environments
Conclusion
The jQuery attr() method provides a simple way to change href attributes for hyperlinks. You can modify single links or process multiple links at once using selectors and the each() method. This technique is essential for dynamic web applications that need to update navigation links based on user interactions or security requirements.
3K+ Views
