Get href value of an anchor tag with JavaScript/jQuery

This post will discuss how to get the href value of an anchor tag in JavaScript and jQuery.

1. Using jQuery

In jQuery, you can use the .prop() method to get the href value of an anchor tag. This is demonstrated below:

JS

$(document).ready(function() {

$('#submit').click(function() {

var href = $('a').prop('href');

alert(href);

})

});

HTML

<!doctype html>

<html>

<body>

<a href="https://www.bing.com/">Click Me</a>

<button id="submit">Submit</button>

</body>

</html>

Edit in JSFiddle

To get the text of an anchor element, use the .text() method.

JS

$(document).ready(function() {

$('#submit').click(function() {

var text = $('a').text();

alert(text);

})

});

HTML

<!doctype html>

<html>

<body>

<a href="https://www.bing.com/">Click Me</a>

<button id="submit">Submit</button>

</body>

</html>

Edit in JSFiddle

2. Using JavaScript

In vanilla JavaScript, you can use the querySelector(), which will return the first anchor tag within the document. Then we can directly access the href property to get the exact value of the href attribute. The following code demonstrates this.

JS

document.getElementById('submit').onclick = function() {

var href = document.querySelector('a').href;

alert(href);

}

HTML

<!doctype html>

<html>

<body>

<a href="https://www.bing.com/">Click Me</a>

<button id="submit">Submit</button>

</body>

</html>

Edit in JSFiddle

This can also be done using the getAttribute() method, which gets the value of the href attribute on the specified anchor tag.

JS

document.getElementById('submit').onclick = function() {

var href = document.querySelector('a').getAttribute('href');

alert(href);

}

HTML

<!doctype html>

<html>

<body>

<a href="https://www.bing.com/">Click Me</a>

<button id="submit">Submit</button>

</body>

</html>

Edit in JSFiddle

That’s all about getting the href value of an anchor tag in JavaScript and jQuery.

Get href value of an anchor tag with JavaScript/jQuery

1. Using jQuery

JS

HTML

JS

HTML

2. Using JavaScript

JS

HTML

JS

HTML

Share this: