innerHtml and innerText destroys tabs in Internet Explorer

Question

I want to take the content of a textarea and put it in a <pre>. Problem is that if i set the innerHTML-property of the pre to the value of the textarea all tabs and linebreaks will be removed in Internet Explorer. If i use innerText instead of innerHtml i will get the line-breaks but tabs still disappear. Works fine in other browsers.

Is there a solution for this?

Answer 1

Create a DOM Text node:

pre.innerHTML= '';
pre.appendChild(document.createTextNode('A\tB\r\nC'));

The Windows-style newline (\r\n) is bogus (DOM content should always have newlines normalised to \n), but seems to be necessary in IE for some reason.