5

In a web application I dynamically create a large and quite complex table with about 10,000 empty cells in a first step (some table cells will stay empty, some not). My first appoach used innerHtml with a no-break space to prevent empty cells from collapsing:

td.innerHtml = ' ';

But that was rather slow. Then I discovered that to set innerText is much faster than setting innerHtml. So I changed my code to

td.innerText = '\u00a0';

because td.innerText = ' ' just wrote the text " " in each cell. It seemed to work in Internet Explorer 11 but in Firefox the borders of the empty cells disappeared. But I do not see any difference if I inspect the cells (via Firebug or something) and compare them with my previous version.

Community
  • 1
  • 1
Sebastian
  • 5,721
  • 3
  • 43
  • 69

1 Answers1

13

element.innerText is not a standard property. It was introduced by Microsoft into Internet Explorer, but no other browsers are guaranteed to support it (which is why you're seeing quirks).

Use element.textContent or rethink your approach. Generating a 10k empty cells table sounds like a very bad idea.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
  • 2
    Chrome very well supports `innerText`. Just like it supports `document.all`... – Florian Margaine Oct 30 '14 at 13:09
  • 1
    I never said that no other browser supports it, I said that no one **guarantees** support, because it's not standard. – Madara's Ghost Oct 30 '14 at 13:09
  • 1
    In most cases there are much less cells. 10k is a more exceptional case but it sometimes happens. Thank you for your answer! – Sebastian Oct 30 '14 at 13:18
  • 2
    As old IE (e.g. IE9) have problems with textContent I had to use both methods. For cross-browser text setting see http://stackoverflow.com/questions/11646398/cross-browser-innertext-for-setting-values – Sebastian Oct 30 '14 at 16:03
  • 1
    If you need multiple browser support, use jQuery. – Madara's Ghost Oct 30 '14 at 16:05
  • 2
    Nowadays innerText is widely support across all browsers. See https://caniuse.com/innertext – Josh Desmond Mar 22 '21 at 05:06
  • 2
    My answer stands, stick to standards, avoid quirks. It's worth noting that back in '14, innerText was not a standard property, it was added to the standard much later to maintain compatibility. – Madara's Ghost Mar 22 '21 at 11:28