- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to get a particular anchor in a document in JavaScript?
In this article we will learn how to get a particular anchor in a document in JavaScript.
The Javascript anchor tags follow an array-like structure. When we try to display a particular anchor tag we have to use ,document.anchors.innerHTML method. This method works the same as array methods which are used to display a particular element.
To get a better understanding let’s look into the usage and syntax of anchor tag in JavaScript.
Syntax
The syntax to get a particular anchor tag is shown below.
document.anchors[i].innerHTML or document.getElementsByTagName(“a”)[i].innerHTML
Example 1
The following is an example program to get a particular anchor tag.
<!DOCTYPE html> <html> <head> <title>To get a particular anchor in a document</title> </head> <body style="text-align : center"> <h1>To get a particular anchor in a document.</h1> <a name="google">Google</a><br> <a name="facebook">Facebook</a><br> <a name="youtube">Youtube</a><br> <p id="text1"></p> <script> document.getElementById("text1").innerHTML = "The second anchor element is : "+document.anchors[1].innerHTML; </script> </body> </html>
On executing the above code, the following output is generated.
Example 2
The another way of accessing the anchor tag content is through document.getElementsByTagName(“a”)[i].innerHTML.
<!DOCTYPE html> <html> <head> <title>To get a particular anchor in a document</title> </head> <body style="text-align : center"> <h1>To get a particular anchor in a document.</h1> <a name="google">Google</a><br> <a name="facebook">Facebook</a><br> <a name="youtube">Youtube</a><br> <p id="text1"></p> <script> document.getElementById("text1").innerHTML = "The third anchor element is : "+document.getElementByTagName("a")[2].innerHTML; </script> </body> </html>
On executing the above code, the following output is generated.
Example 3
The following is an example program to access the properties and content inside an anchor tag.
<!DOCTYPE html> <html> <head> <title>To get a particular anchor in a document</title> </head> <body style="text-align : center"> <h1>To get a particular anchor in a document.</h1> <a name="google" href="https://www.google.com/" title="Google Home Page">Google</a><br> <a name="facebook" href="https://www.facebook.com/" title="Facebook Home Page">Facebook</a><br> <a name="youtube" href="https://www.youtube.com/" title="Youtube Home Page">Youtube</a><br> <p id="text1"></p> <script> document.getElementById("text1").innerHTML = "The third anchor element is : "+document.getElementsByTagName("a")[2].innerHTML+"<br/>"+"The name for : the third anchor element is "+document.getElementsByTagName("a")[2].getAttribute("name")+"<br/> "+"The link for the third anchor tag element is : "+document.getElementsByTagName("a")[2].getAttribute("href")+"<br/> "+"The Title for the third anchor tag element link is : "+document.getElementsByTagName("a")[2].getAttribute("title"); </script> </body> </html>
On executing the above code, the following output is generated.