[ACCEPTED]-Inserting a newline into a pre tag (IE, Javascript)-pre

These quirksmode.org bug report and comments about innerHTML behaviour of Internet 1 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>."

Does this work in IE?

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

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

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

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

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

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

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

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

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

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

IE9 does not normalize white spaces, unlike its predecessors.

You should test 2 for support rather than targeting any specific 1 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.
}

I reckon this.

What I found was IE is using 9 \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 8 editor) plugin I once made I ended up with 7 using BR i edit mode and cleaned it up on 6 submit etc.

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

Note that the code relies 3 on the TinyMCE API, but can easily be written 2 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 1 luck!

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

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

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

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

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

Here is a very small tweak to Edward Wilde's 2 answer that preserves the attributes on 1 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;
}

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

that worked for me.

0