Native JavaScript equivilent of text() for single selected element

Question

How would I return Some Text, <a href="abc.html">Some Anchor</a>, and <img src="abc.jpg" /> from the following three elements without using jQuery? In other words, how would I return $('#t1).text(), $('#t2).text(), $('#t3).text() without using jQuery? I don't need to return an array if multiple elements as I will only select one element at a time.

<td id="t1">Some Text</td>
<td id="t2"><a href="abc.html">Some Anchor</a></td>
<td id="t3"><img src="abc.jpg" /><td>

jQuery does text() as follows. It seems overkill since I am not worried about returning an array for multiple elements.

text: function( value ) {
    return jQuery.access( this, function( value ) {
        return value === undefined ?
            jQuery.text( this ) :
            this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
    }, null, value, arguments.length );
},

Thanks

$('#t2') would return Some Anchor, not <a href.... Same for $('#t3'). — Florian Margaine
– Florian Margaine, Commented Nov 16, 2012 at 16:12
Can you just read the innerHTML property after using document.getElementById()? — Gordon Gustafson
– Gordon Gustafson, Commented Nov 16, 2012 at 16:13
@CrazyJugglerDrummer. No, it will only work for the <a> and <img>, not the text node. — user1032531
– user1032531, Commented Nov 16, 2012 at 16:14
do you need to handle this case <a>a <b>b</b> c</a> and retrieve a b c? — goat
– goat, Commented Nov 16, 2012 at 16:15
@FlorianMargaine. You are right. I guess it would be equivalent to .html(). — user1032531
– user1032531, Commented Nov 16, 2012 at 16:17

Bruno · Accepted Answer · 2012-11-16 16:18:21Z

6

You can retrieve the text of a node(s) like so:

var el = document.getElementById("t1");
var text = el.textContent || el.innerText;

Some more info on textContent and innerText on the MDN site here

edited Nov 16, 2012 at 16:18

answered Nov 16, 2012 at 16:10

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1032531 Over a year ago

Ah ha!, Thanks! I first was using el.data, and it worked without the html elements. Later tried innerHTML, and it erred on the text values. Just curious, why textContent over data, and innerText over innerHTML?

Bruno Over a year ago

@user1032531 innerText is IE's version of textContent. One thing to watch out with innerText is that it won't return hidden text. For more info look at the link to MDN. They explain it much better then I ever could :)

Florian Margaine · Accepted Answer · 2012-11-16 16:14:35Z

2

data is a property on Nodes to get its data (non recursive). innerHTML is the HTML, a property on Elements. textContent is the standard property to get the text (without HTML) of an Element. innerText is the non-standard old-IE way to get textContent.

You now should know what you need :-)

answered Nov 16, 2012 at 16:14

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

1 Comment

user1032531 Over a year ago

Thanks Florian, Now I know more!

Collectives™ on Stack Overflow

Native JavaScript equivilent of text() for single selected element

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related