How to get the text within a tag without using jQuery

Question

I'm looking at an example on this Getting value from table cell in javascript...not jquery page where someone showed how to grab text from a table in JavaScript:

var refTab=document.getElementById("ddReferences") 
var  ttl; 
// Loop through all rows and columns of the table and popup alert with the value 
// /content of each cell. 
for ( var i = 0; i<refTab.rows.length; i++ ) { 
  var row = refTab.rows.item(i); 
  for ( var j = 0; j<row.cells.length; j++ ) { 
    var col = row.cells.item(j);
    alert(col.firstChild.innerText); 
  } 
}

I'm wondering, if I wanted to simply grab the text in the cell of row 1, column 1, could I not do the following? If not, why not?

var myText = document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.innerText;

It doesn't work when I try it in my webpage I'm trying to create. (Yes, I'm aware of a thing called JQuery. I know someone is going to tell me to learn it. Maybe I will some day.)

Actually, I *can* reproduce the problem. It works in Chrome and IE, but doesn't work in FireFox, which I'm presuming is what the OP is using. I tried to post an answer, but I couldn't because the question was mistakenly closed as irreproducible. Nominating for reopening. — Adi Inbar, Mar 10 '14 at 23:56

score 1 · Accepted Answer · answered Mar 11 '14 at 01:07

Are you using FireFox? innerText doesn't work in FireFox (see the orange "Helpful Reply").

The linked Mozialla Support Forum post and the blog post it refers to both recommend using textContent in the place of innerText. While this will work fine for one line of simple text, be aware that they are not the same. textContent returns the text within the element as it's written in the source (ignoring tags), whereas innerText returns the text as it's rendered on the page.

For example, with the following HTML

<table id="ddReferences">
  <tr>
    <td>
      <span>foo bar</span>
    </td>
  </tr>
</table>

both

document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.innerText

and

document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.textContent

give you:

foo bar

However, with this HTML:

<table id="ddReferences">
  <tr>
    <td>
      <span>foo<br>bar</span>
    </td>
  </tr>
</table>

innerText gives you:

foo
bar

whereas textContent gives you:

foobar

...and with this HTML:

<table id="ddReferences">
  <tr>
    <td>
      <span>
        foo
        bar
      </span>
    </td>
  </tr>
</table>

innerText gives you

foo bar

whereas textContent gives you

        foo
        bar

Do some experimenting with a fiddle and you'll see the difference.

score 0 · Answer 2 · answered Mar 11 '14 at 00:43

The problem is that innerText is a non-standard MS property, and not supported on some browsers.

The standard more-or-less equivalent is textContent.

Then, the following should work:

document.getElementById("ddReferences")
    .rows.item(0)
        .cells.item(0)
            .firstChild
                .textContent;

Demo

How to get the text within a tag without using jQuery

2 Answers2