How to get an element by its href attribute ? - GeeksforGeeks

20 Sep, 2019
The task is to select the <a> element by its href attribute. Few of the techniques are discussed below. Here we are going to use JQuery to solve the problem.Approach 1:
Use JQuery selector $(‘a[href=link_to_site]’).
Example 1: This example using the approach discussed above.
<!DOCTYPE HTML>  <html>      <head>         <title>            Get an element by its href attribute.        </title>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">         </script>    </head>     <body style = "text-align:center;" id = "body">          <h1 id = "h1" style = "color:green;" >              GeeksforGeeks          </h1>        <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;">        </p>        <a href = "https://www.geeksforgeeks.org">GeeksforGeeks        </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.geeksforgeeks.org"]').text();            }                 </script>     </body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
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.
<!DOCTYPE HTML>  <html>      <head>         <title>            Get an element by its href attribute.        </title>         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">             </script>    </head>     <body style = "text-align:center;" id = "body">          <h1 id = "h1" style = "color:green;" >              GeeksForGeeks          </h1>        <p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;">        </p>        <a href = "https://www.geeksforgeeks.org"> GeeksforGeeks        </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*="geeks.org"]').text();            }                 </script>     </body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?