Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the href value of tag after clicking on button using JavaScript?
The href attribute specifies the link's destination, which can be a URL or an anchor point within the same document. Changing the href attribute value allows us to dynamically update the destination of the link, which can be useful in creating interactive web applications.
The <a> tag (anchor tag) is used to create hyperlinks in HTML, linking to other web pages or specific locations within the same document. By combining JavaScript with HTML elements, we can modify these links dynamically based on user interactions.
In this article, we'll explore how to change the href value of an anchor tag after clicking a button using JavaScript.
Methods to Change href Value
There are two primary approaches to change the href value of an anchor tag:
Using the href property
Using the setAttribute() method
Using the href Property
The href property is a read-write property that allows you to get or set the value of the href attribute directly. This is the most straightforward approach.
Syntax
element.href = "newURL";
Example
In this example, we assign a new value to the href property to change the link destination after clicking the button:
<html>
<body>
<h3>Change href Attribute Using href Property</h3>
<div>
<a id="myLink" href="https://www.google.com">Visit Google</a>
<br><br>
<button onclick="changeHref()">Change Link</button>
</div>
<script>
function changeHref() {
var link = document.getElementById("myLink");
link.href = 'https://www.tutorialspoint.com';
link.textContent = "Visit TutorialsPoint";
}
</script>
</body>
</html>
Using the setAttribute() Method
The setAttribute() method allows us to set the value of any specified attribute for an element, including the href attribute.
Syntax
element.setAttribute(attributeName, attributeValue);
Parameters
attributeName ? The name of the attribute to set (in this case, "href")
attributeValue ? The new value for the attribute
Example
Here's how to change the href attribute using the setAttribute() method:
<html>
<body>
<h3>Change href Attribute Using setAttribute()</h3>
<div>
<a id="myLink2" href="https://www.github.com">Visit GitHub</a>
<br><br>
<button onclick="updateLink()">Update Link</button>
</div>
<script>
function updateLink() {
var link = document.getElementById("myLink2");
link.setAttribute("href", "https://www.tutorialspoint.com");
link.textContent = "Visit TutorialsPoint";
}
</script>
</body>
</html>
Comparison of Methods
| Method | Syntax | Performance | Use Case |
|---|---|---|---|
| href property | element.href = "url" |
Faster | Simple href changes |
| setAttribute() | element.setAttribute("href", "url") |
Slightly slower | Generic attribute manipulation |
Key Points
The href property is more direct and typically preferred for changing href values
The setAttribute() method is more versatile for setting any attribute
Always update the link text content when changing the href to maintain user experience
Use specific IDs or classes to target the correct anchor elements
Conclusion
Both the href property and setAttribute() method effectively change anchor tag destinations. The href property offers a more direct approach, while setAttribute() provides flexibility for general attribute manipulation. Choose based on your specific requirements and coding style preferences.
11K+ Views
