How to Change the href Attribute with jQuery

By the end of this page, you will understand how jQuery changes HTML attributes, especially the href attribute on <a> elements. You will learn the basic syntax, see practical examples, understand how the code runs step by step, and avoid common mistakes when updating links dynamically.

In jQuery, you can read or change HTML element attributes by using the .attr() method. A hyperlink uses the href attribute to store the URL or destination it should open when clicked.

For example, this HTML link:

<a id="docsLink" href="/old-page">Documentation</a>

has an href attribute with the value /old-page.

To change that value with jQuery, you use:

$('#docsLink').attr('href', '/new-page');

This matters because many web pages update links dynamically based on:

• user actions
• selected options
• API responses
• environment settings
• tracking parameters

The key idea is simple:

• select the element with jQuery
• call .attr()
• provide the attribute name and the new value

When you pass two arguments to .attr(name, value), jQuery sets that attribute on every matched element.

Think of an HTML element like an object with labeled properties.

A link is like a door sign:

• the visible text is the label on the sign
• the href is the destination written underneath

jQuery lets you walk up to the sign and rewrite the destination.

So if a link currently says:

• text: Open Profile
• destination: /user/old

then .attr('href', '/user/new') changes where that door leads without needing to rewrite the whole element.

The basic jQuery syntax is:

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

Example 1: Change one link

<a id="myLink" href="https://example.com/old">Visit site</a>

$('#myLink').attr('href', 'https://example.com/new');

After this runs, the link will point to https://example.com/new.

Example 2: Change all links with a class

<a class="nav-link" href="/home">Home</a>
<a class="nav-link" href="/about">About</a>

Consider this example:

<a id="helpLink" href="/help">Help</a>

$('#helpLink').attr('href', '/support');

Step by step:

1. $('#helpLink')

   • jQuery searches the page for the element with id="helpLink".
   • It creates a jQuery object containing that link.

2. .attr('href', '/support')

   • jQuery looks at the selected element.
   • It finds the href attribute.
   • It replaces the old value /help with /support.

3. Result

   • The HTML effectively becomes:

<a = =>Help

Changing href dynamically is useful in many real applications.

Common examples

• Language switching: update links to /en/docs or /fr/docs
• User-specific pages: point a profile link to the current user's page
• Search filters: build a link based on selected category or sort order
• Tracking links: append campaign parameters such as ?source=email
• Admin dashboards: change action links depending on selected records
• Single-page interfaces: update links after loading data from the server

Example: Add a tracking parameter

$('#promoLink').attr('href', 'https://example.com/pricing?utm_source=newsletter');

Example: Build a user link from a value

var userId = 42;
$('#accountLink').attr('href', '/account/' + userId);

These are small changes, but they are common in interactive pages and dashboards.

In real projects, developers rarely hard-code every link update manually in many places. Instead, they use small patterns that keep the code safe and maintainable.

Common patterns

Guard clauses

Check that the element exists before updating it.

var $link = $('#settingsLink');
if ($link.length) {
  $link.attr('href', '/settings/profile');
}

Build URLs from data

function buildProductUrl(productId) {
  return '/products/' + productId;
}

$('#productLink').attr('href', buildProductUrl(15));

Update links after fetching data

var user = { id: 7, username: 'maya' };
$('#userLink').attr('href', '/users/' + user.id);

Use data attributes as inputs

Beginners often understand the idea but make small syntax or timing mistakes.

1. Forgetting to use .attr()

Broken code:

$('#myLink').href = '/new-page';

Why it fails:

• $('#myLink') returns a jQuery object, not a plain DOM element.
• You should use jQuery methods on it.

Correct code:

$('#myLink').attr('href', '/new-page');

2. Missing the # for an id selector

Broken code:

$('myLink').attr('href', '/new-page');

Why it fails:

• myLink is treated as a tag selector, not an id.

Correct code:

$('#myLink').(, );

jQuery .attr() vs plain JavaScript

Reading vs writing with .attr()

Quick syntax

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

Read current href

var url = $('#myLink').attr('href');

Set new href

$('#myLink').attr('href', '/contact');

Change multiple links

$('.nav-link').attr('href', '/dashboard');

Update after an event

$('#button').on('click', function () {
  $('#myLink').attr('href', '/updated');
});

Rules to remember

• Use for HTML attributes

How do you change a link URL in jQuery?

Use .attr('href', 'new-url') on the selected link element.

$('#myLink').attr('href', '/new-page');

How do I get the current href value with jQuery?

Use .attr('href') with one argument.

var href = $('#myLink').attr('href');

Can jQuery change multiple links at once?

Yes. If your selector matches multiple elements, jQuery updates all of them.

$('.nav-link').attr('href', '/home');

Why is my href not changing?

Common reasons include:

• wrong selector
• code runs before the element exists
• jQuery is not loaded
• you used src instead of href

Should I use .attr() or for links?

• jQuery selectors — Needed to target the correct element before changing its attributes.
• HTML attributes — href is one example of an attribute stored on an element.
• DOM manipulation — Changing href is a basic form of modifying page content and behavior.
• Event handling in jQuery — Links are often updated in response to clicks, changes, or form input.
• attr() vs prop() — Important for understanding when to work with attributes versus DOM properties.
• Document ready — Helps ensure elements exist before jQuery tries to update them.
• JavaScript string concatenation — Often used when building dynamic URLs.
• Data attributes — Useful for storing IDs or values that help generate new links.