insert no-break space by element.innerText [duplicate]

Question

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.

Answer 1

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.