Change href for an anchor tag with JavaScript/jQuery
This post will discuss how to change href for an anchor tag in JavaScript and jQuery.
1. Using jQuery
With jQuery, you can use the .prop() method to set the DOM element property for the set of matched elements. The following code uses prop() to modify the href of all anchor tags on the page.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $("#submit").click(function() { $("a").prop("href", "https://www.google.com/"); console.log("Hyperlink Changed"); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Change Hyperlink</button> </div> </body> </html> |
To select anchors with a specific href, you can do like:
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $("#submit").click(function() { $("a[href='https://www.bing.com/']").prop("href", "https://www.google.com/"); console.log("Hyperlink Changed"); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Change Hyperlink</button> </div> </body> </html> |
This will match the anchor with a specific href on the page. Alternatively, you can select anchors with specific classes or specific ID.
2. Using JavaScript
In vanilla JavaScript, this is very simple. The following code demonstrates this with querySelector(), which returns the first anchor tag within the document.
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { document.querySelector('a').setAttribute("href", "https://www.google.com"); console.log("Hyperlink Changed"); } |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="link_b" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Change Hyperlink</button> </div> </body> </html> |
Alternatively, you can use the querySelectorAll() method, which can return a list of all anchor elements within the document. The following code uses a common looping statement to access the matches.
JS
|
1 2 3 4 5 6 7 |
document.getElementById('submit').onclick = function(e) { var anchors = document.querySelectorAll('a[href]'); anchors.forEach(function(a) { a.href = "https://www.google.com/"; console.log("Hyperlink Changed"); }); } |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Change Hyperlink</button> </div> </body> </html> |
If you want to be more specific, you can use the getElementById() method, which returns the anchor tag matching the specified ID.
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { document.getElementById("link_b").href = "https://www.google.com/"; console.log("Hyperlink Changed"); } |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="link_b" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Change Hyperlink</button> </div> </body> </html> |
This can also be done using the setAttribute() method, which sets the value of an attribute on the specified element.
JS
|
1 2 3 4 |
document.getElementById('submit').onclick = function() { document.getElementById("link_b").setAttribute("href", "https://www.google.com"); console.log("Hyperlink Changed"); } |
HTML
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en"> <body> <a id="link_b" href="https://www.bing.com/">Click Me</a> <div> <button id="submit">Change Hyperlink</button> </div> </body> </html> |
That’s all about changing href for an anchor tag in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)