tag loses line breaks when setting innerHTML in IE

Question

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.

The div is wrapped in a <pre> tag. In Firefox, the <pre> formatting works as expected, but in IE, the text all ends up on one line.

Here's some sample code found here which illustrates the problem. In Firefox, abc is on different line than def; in IE it's on the same line.

    <html>
    <head>
      <title>IE preformatted text sucks</title>
    </head>
    <body>
      <pre id="test">
        a b c
        d e f
      </pre>
      <script type="text/javascript"><!--
      var textContent = document.getElementById("test").innerText;
      textContent = textContent.replace("a", "<span style=\"color:red;\">a</span>");
      document.getElementById("test").style.whiteSpace = "pre";
      document.getElementById("test").innerHTML = textContent;
      --></script>
    </body>
    </html>

Anyone know of a way to get around this problem?

What does the HTML end up looking like in the browser? (via view source). — Lawrence Dol, Jan 16 '09 at 18:59
@Software Monkey - view source only shows the original HTML, and not the changes that were made via javascript. — MCS, Jan 16 '09 at 19:02
@MSC: in firefox, you can select all (or the interesting part) and do view source - then you the current html code and not the inital one. — Harald Schilly, Jan 16 '09 at 19:05

score 18 · Accepted Answer · answered Jan 16 '09 at 19:01

Setting innerHTML fires up an HTML parser, which ignores excess whitespace including hard returns. If you change your method to include the <pre> tag in the string, it works fine because the HTML parser retains the hard returns.

You can see this in action by doing a View Generated Source after you run your sample page:

<PRE id="test" style="WHITE-SPACE: pre"><SPAN style="COLOR: red">a</SPAN> b c d e f </PRE>

You can see here that the hard return is no longer part of the content of the <pre> tag.

score 5 · Answer 2 · edited Oct 20 '11 at 20:32

5

or you could

if (el.innerText) {
    el.innerText = val;
} else {
    el.innerHTML = val;
}

edited Oct 20 '11 at 20:32

phihag

278,196
72
453
469

answered Dec 15 '09 at 17:37

martin

67
1
1

1

This answer is wrong. Why does it have 7 up-votes ? With innerHTML you will lose all linebreaks. You did not understand the question. – Elmue Jan 19 '16 at 22:08

score 5 · Answer 3 · edited May 23 '17 at 12:17

Generally, you'll get more consistent results by using DOM methods to construct dynamic content, especially when you care about subtle things like normalization of whitespace. However, if you're set on using innerHTML for this, there is an IE workaround, which is to use the outerHTML attribute, and include the enclosing tags.

if(test.outerHTML)
    test.outerHTML = '<pre id="test">'+textContent+'</pre>';
else
    test.innerHTML = textContent;

This workaround and more discussion can be found here: Inserting a newline into a pre tag (IE, Javascript)

score 1 · Answer 4 · answered May 09 '12 at 05:37

Don't know if this has been suggested before, but the solution I found for preserving white space, newlines, etc when doing an innerHTML into a 'pre' tag is to insert another 'pre' tag into the text:

<pre id="pretag"></pre>

TextToInsert = "lots of text with spaces and newlines";

document.getElementById("pretag").innerHTML = "<pre>" + TextToInsert + "</pre>";

Seems I.E. does parse the text before doing the innerHTML. The above causes the parser to leave the text inside the additional 'pre' tag unparsed. Makes sense since that's what the parser is supposed to do. also works with FF.

ccpizza · Answer 5 · 2011-02-19T17:34:30.753

0

It could also be rewritten 'the Python way', i.e.:

el.innerText && el.innerText = val || el.innerHTML = val;

edited Feb 19 '11 at 17:34

answered Mar 12 '10 at 12:10

ccpizza

28,968
18
162
169

tag loses line breaks when setting innerHTML in IE

5 Answers5

Linked

Related