How to change the href value of <a> tag after click on button using JavaScript ?

JavaScript is a high-level, interpreted, dynamically-typed and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML documents. DOM acts as an interface between JavaScript and HTML combined with CSS. The DOM represents the document as nodes and objects i.e. the browser turns every HTML tag into a JavaScript object that we can manipulate. DOM is an object-oriented representation of the web page, that can be modified with a scripting language such as JavaScript. To manipulate objects inside the document we need to select it and then manipulate.

Selecting an element can be done in five ways:

DOM allows attribute manipulation. Attributes control the HTML tag’s behavior or provide additional information about the tag. JavaScript provides several methods for manipulating an HTML element attribute.

The following methods are used to manipulate the attributes:

  • getAttribute() method: It returns the current value of an attribute on the element and returns null if the specified attribute does not exist on the element.
  • setAttribute() method: It updates the value of an already existing attribute on the specified element else a new attribute is added with the specified name and value.
  • removeAttribute() method: It is used to remove an attribute of the specified element.

The below code demonstrates the attribute manipulation where the href attribute of <a> tag changes on button click. A function is called on button click which updates the attribute value. The function myFunction() is a JavaScript function and it makes the HTML code more interactive by making runtime modifications.



Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change the href attribute
        dynamically using JavaScript?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <h3>
        Change the href attribute value<br>
        dynamically using JavaScript
    </h3>
      
    <a href="https://www.google.com">
        Go to Google
    </a>
      
    <br><br>
      
    <button onclick="myFunction()">
        Click Here!
    </button>
      
    <script type="text/javascript">
        function myFunction() { 
            var link = document.querySelector("a");
            link.getAttribute("href");
            link.setAttribute("href",
                "https://www.geeksforgeeks.org");
            link.textContent = "Go to GeeksforGeeks";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Explanation: The link opens https://www.google.com before the button is clicked. when the button is clicked then the function myFunction() is called which selects the href attribute of <a> tag and updates its value to https://www.geeksforgeeks.org, Since there is only one <a> tag in the HTML document and we aim to change its attribute value, we use querySelector() and the attribute is updated using setAttribute() method.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change the href attribute
        dynamically using JavaScript?
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <h3>
        Change the href attribute value<br>
        dynamically using JavaScript
    </h3>
      
    <a href="https://www.google.com" id="myLink">
        Go to Google
    </a>
      
    <br><br>
      
    <button onclick="myFunction()">
        Click Here!
    </button>
      
    <script type="text/javascript">
        function myFunction() { 
            document.getElementById('myLink').href
                ="https://www.geeksforgeeks.org";
                  
            document.getElementById("myLink")
                .textContent = "Go to GeeksforGeeks";
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Explanation: The link opens https://www.google.com before the button is clicked. When the button is clicked the function myFunction() is called which selects the href attribute of <a> tag and updates its value to https://www.geeksforgeeks.org. In this approach, the getElementById() method is used to select the element whose destination URL is to be changed.

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.