How to change the href attribute for a hyperlink using jQuery ?

Here’s a detailed explanation of how to change the href attribute of a hyperlink using jQuery, complete with multiple examples and scenarios:

1. Basic Syntax

Use jQuery’s .attr() method to modify the href attribute:

// Syntax
$(selector).attr('href', 'new-url');

// Example: Change single link by ID
$('#myLink').attr('href', 'https://new-website.com');

2. Examples in Different Scenarios

Example 1: Change Href by ID

<a id="homeLink" href="https://old-site.com">Home</a>

// Change href of the link with ID "homeLink"
$('#homeLink').attr('href', 'https://new-site.com');

Example 2: Change Href by Class

<a class="external" href="http://example1.com">Link 1</a>
<a class="external" href="http://example2.com">Link 2</a>

// Update all links with class "external"
$('.external').attr('href', 'https://updated-domain.com');

Example 3: Change Href for All Links on the Page

<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>

// Change all <a> tags
$('a').attr('href', 'https://new-base-url.com');

Example 4: Conditionally Update Href

<a id="dynamicLink" href="http://default.com">Learn More</a>

// Change href based on a condition
if (userIsPremium) {
  $('#dynamicLink').attr('href', 'https://premium-content.com');
} else {
  $('#dynamicLink').attr('href', 'https://free-content.com');
}

Example 5: Update Href Using Data Attributes

<a id="dataDrivenLink" href="#" data-new-href="https://api-data.com">Fetch Data</a>

// Use data attribute to set href
$('#dataDrivenLink').attr('href', $('#dataDrivenLink').data('new-href'));

3. Dynamic Href Changes with Events

Example 6: Change Href on Button Click

<a id="toggleLink" href="https://default.com">Toggle Me</a>
<button id="updateButton">Update Link</button>

// Update href when the button is clicked
$('#updateButton').click(function() {
  $('#toggleLink').attr('href', 'https://new-destination.com');
});

Example 7: Change Href Based on User Input

<input type="text" id="urlInput" placeholder="Enter URL">
<a id="customLink" href="#">Go</a>

// Update href when the input field changes
$('#urlInput').on('input', function() {
  const newUrl = $(this).val();
  $('#customLink').attr('href', newUrl);
});

4. Advanced Techniques

Example 8: Append Parameters to Existing Href

<a id="productLink" href="https://store.com/products">Product</a>

// Add a query parameter to the existing href
$('#productLink').attr('href', function(i, oldHref) {
  return oldHref + '?category=electronics';
});

Example 9: Toggle Href Between Two URLs

<a id="toggleLink" href="https://first-url.com">Toggle Link</a>
<button id="toggleButton">Switch URL</button>

let isFirstUrl = true;
$('#toggleButton').click(function() {
  const newUrl = isFirstUrl 
    ? 'https://second-url.com' 
    : 'https://first-url.com';
  $('#toggleLink').attr('href', newUrl);
  isFirstUrl = !isFirstUrl;
});

5. Key Notes

• .attr() vs .prop():
• Use .attr('href') to work with the HTML attribute (e.g., <a href="...">).
• Use .prop('href') to get the resolved absolute URL (includes domain).
• Chaining: Combine with other jQuery methods:

  $('a.social')
    .attr('href', 'https://twitter.com')
    .css('color', 'blue');

6. Common Mistakes

1. Incorrect Selector:

   // Wrong: Missing #
   $('myLink').attr('href', '...'); // Fails
   // Correct: Use # for IDs
   $('#myLink').attr('href', '...');

2. Typos in Method Names:

   // Wrong: .attrib() is not a valid method
   $('#link').attrib('href', '...');
   // Correct: Use .attr()
   $('#link').attr('href', '...');

Summary

• Use .attr('href', 'new-value') to modify hyperlink URLs.
• Combine with selectors (#id, .class, tag) to target specific links.
• Leverage events (clicks, inputs) for dynamic updates.

Let me know if you need further clarification!