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.

Me neither, I guess he left the \n after it hence my answer. — GavinCattell, Oct 12 '08 at 11:45
I thought one of the points of jQuery was to abstract away the differences between browsers and versions. If i wanted the new (broken) IE behavior I would use `.innerHTML = "..."` instead of `.html("...")`. Am I missing something? — , Dec 03 '11 at 19:54

score 13 · Accepted Answer · answered Oct 12 '08 at 11:46

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>."

score 7 · Answer 2 · answered Oct 12 '08 at 11:49

7

Does this work in IE?

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

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

answered Oct 12 '08 at 11:49

C. K. Young

219,335
46
382
435

1

Worked like a charm, i needed to do full html injection into a pre tag. I tested all the way back to IE6. – Chad Cache Dec 07 '11 at 23:37
Helped in my case also and it's a quick fix. – Leo May 14 '12 at 11:11
This worked great for me in IE8, much more elegant than having the Javascript code writing HTML tags. – Steve Ferguson Jul 10 '13 at 19:34
It really saves my time, great work! – Vayn Apr 04 '22 at 06:59

score 5 · Answer 3 · answered Dec 12 '08 at 16:05

5

The workaround can be found in the page linked to in the accepted answer. For ease of use here it is:

if (elem.tagName == "PRE" && "outerHTML" in elem)
{
    elem.outerHTML = "<PRE>" + str + "</PRE>";
}
else
{
    elem.innerHTML = str;
}

answered Dec 12 '08 at 16:05

Edward Wilde

25,967
8
55
64

1

Thanks for posting the relevant part of the link. – Dec 03 '11 at 19:56

score 4 · Answer 4 · answered Oct 12 '08 at 11:33

4

<br/> shoud only output one line in all browsers. Of course remove the \n as well, code should be:

document.getElementById("putItHere").innerHTML = "first line<br/>second line";

answered Oct 12 '08 at 11:33

GavinCattell

3,863
20
22

score 4 · Answer 5 · answered Oct 12 '08 at 12:04

4

Content inside the <pre> tag should not be considered HTML.

In fact, the point of <pre> tag is so that it does display formatted text.

Using the innerText property is the correct way to modify the content of a <pre> tag.

document.getElementById("putItHere").innerText = "first line\nsecond line";

answered Oct 12 '08 at 12:04

Samuel Kim

3,723
2
23
18

1

True, this would work fine in IE, but note that innerText is not available in Firefox - DOM manipulation methods would likely be a more robust solution in this case, such as Chris Jester-Young's answer using appendChild and document.createTextNode. – J c Oct 12 '08 at 12:37

Drew · Answer 6 · 2011-03-14T12:43:13.657

IE9 does not normalize white spaces, unlike its predecessors.

You should test for support rather than targeting any specific browser. E.g...

var t = document.createElement(elem.tagName);
t.innerHTML = "\n";

if( t.innerHTML === "\n" ){
    elem.innerHTML = str;
}
else if("outerHTML" in elem)
{
    elem.outerHTML = "<"+elem.tagName+">" + str + "</"+elem.tagName+">";
}
else {
    // fallback of your choice, probably do the first one.
}

score 1 · Answer 7 · answered Oct 12 '08 at 12:12

I reckon this.

What I found was IE is using \r\n and Fx(others) is using \n

var newline;
if ( document.all ) newline = '\r\n';
else newline = '\n';

var data = 'firstline' + newline + 'second line';
document.getElementById("putItHere").appendChild(document.createTextNode(data));

For a TinyMCE(wysiwyg editor) plugin I once made I ended up with using BR i edit mode and cleaned it up on submit etc.

This code loops through all BR elements inside PRE elements and replaces BR with newlines.

Note that the code relies on the TinyMCE API, but can easily be written using standard Javascript.

Clean up:

        var br = ed.dom.select('pre br');
        for (var i = 0; i < br.length; i++) {
          var nlChar;
          if (tinymce.isIE)
            nlChar = '\r\n';
          else
            nlChar = '\n';

          var nl = ed.getDoc().createTextNode(nlChar);
          ed.dom.insertAfter(nl, br[i]);
          ed.dom.remove(br[i]);
        }

Good luck!

This is actually the best solution I've found here. Here is what I ended up with, which actually works incredibly closely to how .innerText works normally. This is what I ended up with: ```element.innerText = ""; element.appendChild(document.createTextNode(textContent));``` — Karl White, Jan 30 '17 at 03:53

score 1 · Answer 8 · answered Apr 27 '10 at 10:32

If you don't want to use outerHTML, you can also do the following for IE, if an additional pre tag is not an issue:

 if(isIE)
     document.getElementById("putItHere").innerHTML = "<pre>" + content+"</pre>";
 else
     document.getElementById("putItHere").innerHTML = content;

score 1 · Answer 9 · 2011-12-03T20:29:20.087

1

I've found that innerHTML is processed before it is applied to the element, hence <br> becomes a newline and multiple white spaces are removed.

To preserve the raw text you must use nodeValue, for example;

document.getElementById('pre_id').firstChild.nodeValue='    white space \r\n ad new line';

edited Dec 03 '11 at 20:29

answered May 05 '09 at 14:23

I think that this is a better answer that the accepted one. The accepted answer does not preserve the attributes in the
```
 tag and doing so would be even more work.
```
– Dec 03 '11 at 20:23
It turns out that this doesn't work in IE9. The lesson learned is not to post when tired, frustrated and testing half a dozen browsers. – Dec 06 '11 at 15:08

score 1 · Answer 10 · answered Dec 06 '11 at 15:13

Here is a very small tweak to Edward Wilde's answer that preserves the attributes on the <pre> tag.

if (elem.tagName == "PRE" && "outerHTML" in elem) {
    var outer = elem.outerHTML;
    elem.outerHTML = outer.substring(0, outer.indexOf('>') + 1) + str + "</PRE>";
}
else {
    elem.innerHTML = str;
}

score 0 · Answer 11 · answered Mar 05 '09 at 04:14

0

if (typeof div2.innerText == 'undefined')
    div2.innerHTML = value;
else
    div2.innerText = value;

that worked for me.

answered Mar 05 '09 at 04:14

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

11 Answers11

Linked