Get Local Href Value from Anchor (A) Tag

Get local href value from anchor (a) tag

The below code gets the full path, where the anchor points:

document.getElementById("aaa").href; // http://example.com/sec/IF00.html

while the one below gets the value of the href attribute:

document.getElementById("aaa").getAttribute("href"); // sec/IF00.html

Getting value and href of closest anchor tag?

The function closest finds the closest ancestor/parent element using a specific selector rather than a sibling.

In that markup the link that you want to select is not an ancestor/parent of the buttons.

Further, this line must be modified:

var target = $('.show_field').closest('a');

To this:

               +---- This is the current clicked button.
               |
               |                         +--- Gets the desired element 'a'
               |                         |
               v                         v
var target = $(this).closest('li').find('a');
                              ^
                              |
                              +---- Finds the closest ancestor 'li'.

An alternative is to find the closest element li and then find an element a.

$(document).ready(function() {  $('.input_fields_wrap').on("click", ".addlink-edit-icon", function(e) {    e.preventDefault();    var target = $(this).closest('li').find('a');    var edit_name = target.text();    var edit_address = target.attr('href');    console.log('name', edit_name);    console.log('address', edit_address);  });});

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head><body>  <div class="input_fields_wrap" style="overflow-y: hidden;">    <div class="addlink_dynlist">      <li>        <a href="Get Local Href Value from Anchor (A) Tagaaaa">Get Local Href Value from Anchor (A) Tag</a>        <span class="show_field">             <button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>        </span>      </li>      <li>        <a href="bbbb">bb</a>        <span class="show_field">             <button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>        </span>      </li>      <li>        <a href="ccc">cccccccccc</a>        <span class="show_field">             <button class="fa fa-pencil-square-o addlink-edit-icon hand-cursor">edit</button>        </span>      </li>    </div>  </div>  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>  <script src="./js/test.js"></script></body></html>

how to get href value in Server side when click the anchor tag

get href value using jquery like

   $(document).ready(function () {
                    $('.info_link').click(function () {
                        var href = $(this).attr('href');
                        getHREFValue(href);
                    });
                });

then using Ajax to pass the href value to server side

                function getHREFValue(data) {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: "{'HrefValue':'" + data + "'}",
                        url: "./List.aspx/Insert",
                        success: function (Record) {

                            if (Record.d == true) {
                                console.log("Success");
                            }
                            else {
                                console.log("Failure");
                            }
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
                }

Hi, I'm Trying To scrape href from Anchor tag Using JQuery.ajax

1st do you have permission to scrape?

If so

Seems you need to change the X in

https://www.usajobs.gov/Search/Results?a=TD03&p=X

in the success

from 1 until 404

and use a setTimeout to call again to not hammer them
Also

 var urls = $("#usajobs-search-results a').map(function() {
   return this.href; }).get()
 })

getting the href value from anchor tag

Add return false to the end of your click event handler to stop the execution of the link.

$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).attr('href');
        alert(txt);
        return false;
    )};
)};

You can also use event.preventDefault() if you want the event to still propagate up the DOM:

$(document).ready(function() {
    $('ul.sub_menu a').click(function(event) {
        var txt = $(this).attr('href');
        alert(txt);
        event.preventDefault();
    )};
)};

Note: In a jQuery event handler, return false; is the same as calling event.preventDefault().stopPropagation();.

How to append current window location in the href value of anchor tag

Try this

<a class="twitter-share-link" href="//twitter.com/intent/tweet?via=Companytext=@(shareWord)LOCATION_HREF#tagCompany" >
  <i class="icon-twitter">link</i>
</a>
<script>
  (function(){
    var link = document.getElementsByClassName('twitter-share-link')[0]
    link.setAttribute('href', link.getAttribute('href').replace('LOCATION_HREF',location.href))
  })()
</script>

How do you make the href of an anchor tag dependent on a class property?

Im not sure, havent used razor in a while, but I think its something like
<a href="@item.Picture">

JavaScript - get href attribute value via DOM traversal

Edit

I think I should point out (since this has been accepted), what @LGSon had put in the comments and @hev1 has put in their answer, that this should be handled in a more elegant way than simply calling getElement on multiple DOM elements.

Here is a proposed (and much nicer) version of the call to get the href value:

document.querySelector('#something td:nth-child(3) a').href;

Original Answer

The href property exists on the anchor tag (<a>) which is a child of the <td> element. You will need to grab the anchor by using something like the DOM children property like so:

tdElement = document.getElementById('something').getElementsByTagName('td')[3];
anchor = tdElement.children[0];
anchor.getAttribute("href");

Get Local Href Value from Anchor (A) Tag