title: <pre> tag loses line breaks when setting innerHTML in IE
body: <p>I'm using Prototype's PeriodicalUpdater to update a div with the results of an ajax call.  As I understand it, the div is updated by setting its innerHTML.</p>
  
  <p>The div is wrapped in a <code>&lt;pre&gt;</code> tag.  In Firefox, the <code>&lt;pre&gt;</code> formatting works as expected, but in IE, the text all ends up on one line.</p>
  
  <p>Here's some sample code found <a href="http://forums.devnetwork.net/viewtopic.php?f=13&amp;t=93265" rel="noreferrer">here</a> which illustrates the problem.  In Firefox, <code>abc</code> is on different line than <code>def</code>; in IE it's on the same line.</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;IE preformatted text sucks&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;pre id="test"&gt;
          a b c
          d e f
        &lt;/pre&gt;
        &lt;script type="text/javascript"&gt;&lt;!--
        var textContent = document.getElementById("test").innerText;
        textContent = textContent.replace("a", "&lt;span style=\"color:red;\"&gt;a&lt;/span&gt;");
        document.getElementById("test").style.whiteSpace = "pre";
        document.getElementById("test").innerHTML = textContent;
        --&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Anyone know of a way to get around this problem?</p>