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

Answer 1

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