How to get an element by its href attribute ?

0 0 1 minute read

The task is to select the <a> element by its href attribute. A few of the techniques are discussed below. Here we are going to use JQuery to solve the problem.

Approach: Use JQuery selector $(‘a[href=link_to_site]’).

Example 1: This example using the approach discussed above.

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script> 
<h1 id="h1" style="color:green;"> 
    zambiatek 
</h1> 
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> 
</p> 
<a href="https://www.zambiatek.com">zambiatek 
</a> 
<br> 
<br> 
<button onclick="gfg_Run()"> 
    Click here 
</button> 
<p id="GFG_DOWN" style="font-size: 23px; 
    font-weight: bold; color: green; "> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    el_up.innerHTML = 
    "Click on the button to select the element by HREF attribute."; 
    function gfg_Run() { 
        el_down.innerHTML = 
            $('a[href="https://www.zambiatek.com"]').text(); 
    }         
</script>

Output:

How to get an element by its href attribute ?

Approach 2: Use JQuery selector $(‘a[href*=part_of_link]’). it will select the element if any part of the attribute matches with value.

Example 2: This example using the approach discussed above.

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script> 
<h1 id="h1" style="color:green;"> 
    zambiatek 
</h1> 
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> 
</p> 
<a href="https://www.zambiatek.com"> zambiatek 
</a> 
<br> 
<br> 
<button onclick="gfg_Run()"> 
    Click here 
</button> 
<p id="GFG_DOWN" style="font-size: 23px; 
        font-weight: bold; color: green; "> 
</p> 
<script> 
    var el_up = document.getElementById("GFG_UP"); 
    var el_down = document.getElementById("GFG_DOWN"); 
    el_up.innerHTML = 
    "Click on the button to select the element by HREF attribute."; 
    function gfg_Run() { 
        el_down.innerHTML = $('a[href*="zambiatek.org"]').text(); 
    }         
</script>