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

问题

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.

回答1:

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

回答2:

Does this work in IE?

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

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

回答3:

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;
}

回答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";

回答5:

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

回答6:

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!

回答7:

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

回答8:

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;

回答9:

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;
}

回答10:

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

that worked for me.

回答11:

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';

来源：https://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript

标签

javascript

internet-explorer

pre