Inserting a newline into a pre tag (IE, Javascript)

Question

In IE when I insert text into a <pre> tag the newlines are ignored:

<pre id="putItHere"></pre>

<script>
function putText() {
   document.getElementById("putItHere").innerHTML = "first line\nsecond line";
}
</script>

Using \r\n instead of a plain \n does not work.

<br/> does work but inserts an extra blank line in FF, which is not acceptable for my purposes.

Answer 1

These quirksmode.org bug report and comments about innerHTML behaviour of Internet Explorer could help:

"IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as <pre> and <textarea>."

Answer 2

Does this work in IE?

document.getElementById("putItHere")
    .appendChild(document.createTextNode("first line\nsecond line"));

I tested it with Firefox and it works. :-)