Page 1 of 1

InnerHTML issue with IE8, Chrome, Opera - RESOLVED!

Posted: Sun Jan 31, 2010 3:31 pm
by califdon
Call off the dogs! As soon as I saw the code highlighted here, I realized that I had omitted a closing single-quote in the span style tag! Sorry.
That cleared up all the browsers except Opera, which still displays the raw HTML. Any insights there??
Sheesh! That was just a caching issue. Opera's OK now, too! I think I need to take a break!

I am trying to replace the innerHTML attribute of a <div>, and it contains a couple of HTML tags, namely <br /> and <span>. This works fine in Firefox, but produces different results in IE8, Chrome, Opera and Safari. I assume that I'm not using correct syntax, but FF is lax about enforcing whatever rule I'm breaking. I've tried to research it and find that there was an acknowledged bug in IE5 on just this issue, but Microsoft's workaround doesn't seem to work for me, either.

Here are the pertinent code fragments:

Code: Select all

var txtscore = " Your score is <br ><span style='font-size:24pt; font-style:bold;>";
 txtscore += Math.floor(totscore);
 txtscore += "</span>";
 document.getElementById('score').innerHTML = txtscore;
I have used alert() to show that the txtscore variable holds precisely the code that I want (also, it works fine in FF, as I said).

Code: Select all

<div id='score' class='box'><!-- --></div>
Results:
  • Firefox: the box shows:

    Code: Select all

    Your score is
    [size=150]    [b]33[/b][/size]
  • IE8: only "Your score is" is displayed.
  • Chrome: same as IE8.
  • Safari: same as IE8.
  • Opera: displays the raw HTML:

    Code: Select all

    Your score is 
    <span style='font-size:24pt; font-style:bold;>50
This is driving me wacko. Anyone spot what's going on?

Re: InnerHTML issue with IE8, Chrome, Opera - RESOLVED!

Posted: Thu Feb 04, 2010 5:11 am
by jaiswarvipin
In IE 8 this issue afe comming. Even i was facing same issue and i have done one thing simply replcae the <span> tag with <table>.
and best part it i workin i nall browser , in IE3.....IE8, Firefox , mozila , opera and others.
SO simply replavce you code by

Code: Select all

 
var txtscore = "<table><tr><td>Your score is</td></tr><tr><td style='font-size:24pt; font-style:bold; text-align: center;'>";
txtscore += Math.floor(totscore);
txtscore += "</td></tr></table>";