Javascript to get link text

Question

My HTML looks like this:

<div class="col-md-2" id="myName1">
  <p>
    <a href="/something/121212">Get This Text</a>
  </p>
</div>

The question is how do I get the text "Get this Text"

Something like this, but getting that text which is wrapped in the p and a tags:

function () {
  return document.getElementById('TextID');
}

http://stackoverflow.com/a/7815388/901048 is very similar – Blazemonger Feb 01 '17 at 20:20 — Blazemonger, Feb 01 '17 at 20:20

score 10 · Accepted Answer · answered Feb 01 '17 at 20:22

10

You can search for the first p inside your myName1 element, then the first a within that.

var e = document.getElementById('myName1').
        getElementsByTagName('p')[0].
        getElementsByTagName('a')[0];

var theText = e.innerHTML;

console.log(theText);

// or, in sufficiently-modern browsers

e = document.querySelector('#myName1 p a');
theText = e.innerHTML;

console.log( theText );

<div class="col-md-2" id="myName1">
<p>
<a href="/something/121212">Get This Text</a>
</p>
</div>

answered Feb 01 '17 at 20:22

Paul Roub

36,322
27
84
93

1

In this specific case, he doesn't even need to search for the first `p`. – Blazemonger Feb 01 '17 at 20:25
1

No, but the question specified "that text which is wrapped in the p and a tags", so we had to pick *a* `p` element to search within. – Paul Roub Feb 01 '17 at 20:26

Abhinav Galodha · Answer 2 · 2017-02-01T20:26:40.057

2

Simply using document.getElementById('anchorID').text; assuming anchor has id of anchorID. The text property sets or returns the text content of a link.

EDIT 1 : If you are not able to add the ID, then you need to take long path by going to document.getElementByID and then reach to the element using the document.getElementsByTagName

  var myAnchor = document.getElementById("myName1").getElementsByTagName('p')[0].getElementsByTagName('a')[0];
  console.log(myAnchor.text);

<div class="col-md-2" id="myName1">
<p>
<a id="anchorID" href="/something/121212">Get This Text</a>
</p>
</div>

edited Feb 01 '17 at 20:26

answered Feb 01 '17 at 20:20

Abhinav Galodha

9,293
2
31
41

Problem is that there is no `id` on the `a` tag and I can't add one. – jonmrich Feb 01 '17 at 20:22
in that case, you can use the `document.getElementById("myName1").getElementsByTagName('p')[0].getElementsByTagName('a')[0]` to get all the anchor elements and then get the first element (assuming you have only 1 anchor tag). Updated the post. – Abhinav Galodha Feb 01 '17 at 20:23
As MDN doesn't document `aElement.text`, I was wondering if it is standard HTML; indeed it is: According to https://html.spec.whatwg.org/#dom-a-text , `aElement.text` is the same as `anyElement.textContent`. – Abdull Jul 13 '22 at 09:03

score 2 · Answer 3 · answered Feb 01 '17 at 20:25

2

Try adding the following in your function:

return document.querySelector('#myName1 p a').innerHTML

answered Feb 01 '17 at 20:25

Thomas

103
5

score 1 · Answer 4 · answered Feb 01 '17 at 20:30

you can use the get element by tag name method, but it returns an array of results so you will have to consider that, in your example, this works...

var a=document.getElementById('myName1');
console.log(a.getElementsByTagName('p')[0].getElementsByTagName('a')[0].innerHTML);

<div class="col-md-2" id="myName1">
<p>
<a href="/something/121212">Get This Text</a>
</p>
</div>

score 0 · Answer 5 · answered Feb 01 '17 at 20:24

Check this code, you can use innerHtml attribute

<script>
function gettext()
{
    return document.getElementById('link').innerHTML;
}

</script>
 <div class="col-md-2" id="myName1">
<p>
<a href="/something/121212" id="link">Get This Text</a>
</p>
</div>
<script>
alert(gettext());
</script>

score 0 · Answer 6 · answered Feb 01 '17 at 22:22

0

Or if you are using JQuery $("#myName1 p a").text();

answered Feb 01 '17 at 22:22

Waleed

349
3
6

Javascript to get link text

6 Answers6