How to change href attribute of a hyperlink using jQuery ?

Last Updated : 12 Sep, 2024

Changing the href attribute of a hyperlink using jQuery refers to the process of modifying the URL a link directs to without altering the HTML manually. This capability is useful for creating dynamic web applications where link destinations need to change based on user interactions or other conditions.

Table of Content

Using the attr() method

The attr() method in jQuery is used to set or return the attributes and their values associated with the selected element. We can directly pass the href attribute and the new URL value to this method as parameters to change the URL.

Syntax:

$(selector).attr('href', 'newURL');

Example: In this example, we will change the href attribute value using the attr() method and change the display text using the jQuery text() method.

HTML

<!DOCTYPE>  <html>   <head>      <title>          How to change href attribute          of a hyperlink using jQuery?      </title>       <script src=  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">      </script>       <style>          body {              text-align: center;          }           h1 {              color: green;          }      </style>  </head>   <body>      <h1>GeeksforGeeks</h1>       <h3>          How to change href attribute of          <br>a hyperlink using jQuery?      </h3>       <a href="https://www.geeksforgeeks.org/"         target="_blank" id="GFG">          https://www.geeksforgeeks.org/      </a>      <br><br>       <button>Change URL</button>       <script>          $(document).ready(function () {              $("button").click(function () {                  $("a").attr("href",  "https://www.geeksforgeeks.org/web-development/");                   $("#GFG").text(  "https://www.geeksforgeeks.org/web-development/");              });          });      </script>  </body>   </html>

Output:

Using the prop() method

The prop() method can also be used to change the URL of the href attribute by passing the href property and the new URL value as parameters in the same way we did with the attr() method in the last example.

Syntax:

$(selector).prop('href', 'newURL');

Example: The below example will explain the use of the prop() method to change the URL of the href attibute.

HTML

<!DOCTYPE>  <html>   <head>      <title>          How to change href attribute          of a hyperlink using jQuery?      </title>       <script src=  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">      </script>       <style>          body {              text-align: center;          }           h1 {              color: green;          }      </style>  </head>   <body>      <h1>GeeksforGeeks</h1>       <h3>          How to change href attribute of          <br>a hyperlink using jQuery?      </h3>       <a href="https://www.geeksforgeeks.org/"         target="_blank" id="GFG">          https://www.geeksforgeeks.org/      </a>      <br><br>       <button>Change URL</button>       <script>          $(document).ready(function () {              $("button").click(function () {                  $("a").prop("href",  "https://www.geeksforgeeks.org/web-development/");                   $("#GFG").text(  "https://www.geeksforgeeks.org/web-development/");              });          });      </script>  </body>   </html>