IE8 PRE Tag Problems

Question

I referred to the other discussion which is on similar lines. Here is the link for that discussion.

code inside pre goes in one line on IE8

The outer HTML works fine. But my requirement is for inner HTML. The reason for not using outer HTML is that I'm using AngularJS which has conditions on the HTML itself. So I need to add the content to the innerHTML.

Here is the HTML.

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p>

Here is the JS that is supporting it.

var elem = $(".pre.fileContent")[1];
if (elem.tagName == "P" && "innerHTML" in elem){
    elem.innerHTML = "<pre>" + elem.innerHTML + "</pre>";
}

I've also tried replacing "<pre>" + elem.innerHTML + "</pre>" with the scope variable which results in "<pre>" + $scope.file.fileContent + "</pre>";

Here is the error that I'm getting on IE8.

Error: Unknown runtime errorundefined

If I remove <pre> from the elem.innerHTML the error doesn't occur. Also, for outerHTML, this error doesn't show up.

How should I tackle this?

Answer 1

It looks like you're trying to just wrap the content in a pre element? If so, you could just do this:

var pre = document.createElement('pre');
while(elem.firstChild) pre.appendChild(elem.firstChild);
elem.appendChild(pre);

This has the added bonus of keeping any property values and event handlers.

Alternatively, you could just apply CSS to the relevant element:

white-space:pre;
font-family:monospace;

EDIT: The CSS solution may be better - I don't think it's valid to have <pre>, a block-level element, inside a <p> tag.

Answer 2

I actually found the answer myself. As I'm using AngularJS I used the wrong directive ng-bind-html-unsafe. I switched ng-bind-html-unsafe to ng-bind, then my problem was solved!

Thanks everyone for helping me out!