ansaurus

Question

<pre> tag loses line breaks when setting innerHTML in IE

Answer 1

+6 A:

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.

EndangeredMassa 2009-01-16 19:01:32

Answer 2

+3 A:

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: http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript

Jordan Liggitt 2009-01-16 19:10:56

Answer 3

A:

or you could

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

martin 2009-12-15 17:37:32

Answer 4

A:

Or, I suppose, you could rewrite it 'the Python way', i.e.:

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

2010-03-12 12:10:40

ansaurus

tags:

views:

answers:

<pre> tag loses line breaks when setting innerHTML in IE

related questions