Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Get a Particular Anchor in a Document Using 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.
1K+ Views
