Skip to main content

How to Change the href attribute of an <a> link tag in JavaScript

Dynamically changing the href attribute of an anchor (<a>) tag is a common task in web development. You might need to update a download link, change a navigation button's destination, or redirect a user based on their input. The most direct and standard way to do this is by setting the element's .href property.

This guide will teach you the best methods for changing an <a> tag's href, as well as other related properties like its text content and target.

The most idiomatic and readable way to change a link's destination is to directly set its .href DOM property.

For example, you have a link, and you want to change its URL when a user clicks a button.

<a id="my-link" href="/default-path">Click Here</a>
<button id="change-btn">Change Link</button>

Solution:

const myLink = document.getElementById('my-link');
const changeButton = document.getElementById('change-btn');

changeButton.addEventListener('click', () => {
  // Set the .href property to the new URL
  myLink.href = 'https://www.example.com/new-path';
  
  console.log(`Link href is now: ${myLink.href}`);
});
note

This is the recommended best practice because it is clean, direct, and specifically designed for this purpose.

An Alternative Method: element.setAttribute()​

You can also use the more generic setAttribute() method to change the href attribute. While this works perfectly, it is slightly more verbose than direct property assignment.

Solution:

const myLink = document.getElementById('my-link');
const changeButton = document.getElementById('change-btn');

changeButton.addEventListener('click', () => {
  // Use setAttribute to change the 'href' attribute
  myLink.setAttribute('href', 'https://www.example.com/new-path');
});
note

For standard HTML attributes like href, id, or title, direct property assignment (.href, .id, .title) is generally preferred for its conciseness.

How to Change Other Link Properties (Text and Target)​

When you change a link's destination, you often need to update its text or behavior as well.

How to Change the Link Text​

Use the .textContent property to change the text displayed to the user.

myLink.href = 'https://www.example.com/new-path';
myLink.textContent = 'Visit the New Page'; // This updates the link's text

Set the .target property to '_blank' to make the link open in a new browser tab. It's a crucial security best practice to also set .rel to 'noopener noreferrer' when using _blank.

myLink.href = 'https://www.example.com/new-path';
myLink.target = '_blank';
myLink.rel = 'noopener noreferrer';

This script demonstrates a common use case where a user selects an option from a dropdown, and a download button's href is updated to point to the correct file.

HTML:

<select id="file-select">
  <option value="report-q1.pdf">Q1 Report</option>
  <option value="report-q2.pdf">Q2 Report</option>
  <option value="report-q3.pdf">Q3 Report</option>
</select>
<a href="#" id="download-link" class="button">Download</a>

JavaScript:

const fileSelect = document.getElementById('file-select');
const downloadLink = document.getElementById('download-link');

// The base path for our files
const basePath = '/downloads/';

// Function to update the link's href
function updateDownloadLink() {
  const selectedFile = fileSelect.value;
  if (selectedFile) {
    downloadLink.href = basePath + selectedFile;
    downloadLink.textContent = `Download ${selectedFile}`;
  }
}

// Listen for changes on the select element
fileSelect.addEventListener('change', updateDownloadLink);

// Set the initial state on page load
updateDownloadLink();

Conclusion​

Changing the href of an <a> tag is a simple and fundamental DOM manipulation task.

  • The recommended best practice is to directly set the element.href property. It is the most concise and idiomatic method.
  • The element.setAttribute('href', ...) method is a functional alternative but is slightly more verbose.
  • You can easily update other properties like .textContent and .target at the same time to fully configure your link's appearance and behavior.

Table of Contents