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.

Cachinnate

Firefox does not support innerText, in favour of textContent – Grainfield

innerText is Microsoft's proprietary extensions, iirc. – Xenon

I'm not sure I understand what "collapsing" means, nor why this can't be solved much more efficiently with CSS. – Manufacture

Do not fix this with JS. Use empty-cells: show; in your CSS. – Hedgepeth

empty-cells didn't work for me :o – Disassemble

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.

Verecund

Chrome very well supports innerText. Just like it supports document.all... – Mehta

I never said that no other browser supports it, I said that no one guarantees support, because it's not standard. – Fortyfour

In most cases there are much less cells. 10k is a more exceptional case but it sometimes happens. Thank you for your answer! – Cachinnate

As old IE (e.g. IE9) have problems with textContent I had to use both methods. For cross-browser text setting see #11646898 – Cachinnate

If you need multiple browser support, use jQuery. – Fortyfour

Nowadays innerText is widely support across all browsers. See caniuse.com/innertext – Hudspeth

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. – Fortyfour