How to change the href of <a> tag using JavaScript

# How to change the href of `<a>` tag using JavaScript

To change the href of an <a> tag using JavaScript:

Select the button element and the <a> element.
Add a click event listener to the button.
When the button is clicked, change the href of the <a> element to the given value.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <a id="link" href="#">bobbyhadz.com</a>

    <button id="btn">Change href</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const link = document.getElementById('link');
  link.href = 'https://bobbyhadz.com';

  return false;
});

change href of anchor element

The code for this article is available on GitHub

We used the document.getElementById() method to select the button and the anchor element.

We then used the addEventListener() method to add a click event listener to the button.

The <a> tag initially has its href attribute set to a hash #.

index.html

Copied!
<a id="link" href="#">bobbyhadz.com</a>

When the user clicks on the button, the href attribute on the link gets set to a new value.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const link = document.getElementById('link');
  link.href = 'https://bobbyhadz.com';

  return false;
});

If the user clicks on the link after clicking on the button, they'd navigate to https://bobbyhadz.com.

The code sample uses dot notation to set the value of the href attribute but you can also use the setAttribute() method.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const link = document.getElementById('link');

  link.setAttribute('href', 'https://bobbyhadz.com');

  return false;
});

The code for this article is available on GitHub

The setAttribute() method takes 2 parameters - the name of the attribute you want to set on the element and its value.

If you also need to update the link's text, use the innerHTML property.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const link = document.getElementById('link');

  link.setAttribute('href', 'https://bobbyhadz.com');

  link.innerHTML = 'bobbyhadz.com - new';

  return false;
});

If you want to open the link in a new tab when it's clicked, set the target attribute to _blank.

index.js

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const link = document.getElementById('link');
  link.setAttribute('href', 'https://bobbyhadz.com');

  // 👇️ open the link in a new tab
  link.setAttribute('target', '_blank');
  link.setAttribute('rel', 'noopener noreferrer');
});

The code for this article is available on GitHub

The rel attribute is used for security purposes.

# Change the href of `<a>` tag using an inline event handler

The previous example used a separate .js file, however, you can also use an inline event handler.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <script>
      function changeLinkHref() {
        console.log('href of link changed');

        const link = document.getElementById('link');

        link.setAttribute('href', 'https://bobbyhadz.com');

        return false;
      }
    </script>
  </head>

  <body>
    <a id="link" href="#">bobbyhadz.com</a>

    <button onclick="changeLinkHref()">Change href</button>
  </body>
</html>

The code for this article is available on GitHub

The code sample sets an inline onclick event handler on the button element.

Every time the button is clicked, the changeLinkHref function is invoked.

change href of anchor using inline event handler

Here is an example that also opens the link in a new tab and changes its text.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <script>
      function changeLinkHref() {
        console.log('href of link changed');

        const link = document.getElementById('link');

        link.setAttribute('href', 'https://bobbyhadz.com');

        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener noreferrer');

        link.innerHTML = 'bobbyhadz.com - new';
      }
    </script>
  </head>

  <body>
    <a id="link" href="#">bobbyhadz.com</a>

    <button onclick="changeLinkHref()">Change href</button>

    <!-- <script src="index.js"></script> -->
  </body>
</html>

also open in new tab and change link text

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to change the href of <a> tag using JavaScript