Problems with innerHTML using Javascript

Question

Ok, so the base problem is in setting the innerHTML of a div element, any html markup that is in my string is being stripped (and not displayed) in all major browsers except for Firefox. Now for the catch, this doesn't happen when the page is first loaded, it only happens on a partial postback (unless its Firefox, then it always works).

I'm trying to run a script (that's actually being created and added from the code behind via a ScriptManager) to add some html elements (with event handlers) to some already existing html elements. I know the script is always running, even when I have the issue because I can nuke the existing element's html or set it some text. I can even have text and markup, but the markup won't be rendered while the text will, unless the text is within the markup. So:

someElement.innerHTML = "Blah blah blah" -- Works

someElement.innerHTML = "<br/><br/>Blah blah blah<br/><br/>"

Blah blah blah is displayed but with no breaks

someElement.innerHTML = "<p>This will disappear</p><div>So will this</div>"

All of that text will disappear along with the markup. Oh, and I looked into doing this the 'standard' way, ie document.createElement etc. but I had the exact same issue.

If you need/want to know anything else just ask.

edit: when I say major browsers, specifically I meant: Safari 4.0.3, Chrome 3.0.195.27, and IE 8.0.6

The full javascript (related to this function). If there are formatting errors is because this is actually a string in C# so there was a bunch of funky escape nonsense which I tried to remove for clarity.

var overflowEls = getElementsByClass("descriptionBox");

for (var i = 0; i < overflowEls.length; i++)
{
    if (checkOverflow(overflowEls[i]))
    {
        var html = overflowEls[i].innerHTML;
        overflowEls[i].innerHTML = overflowEls[i].innerHTML = "<div class="videoFeedDescriptionButtons" onclick="expand(this);">+</div><br/><div onclick="collapse(this);" class="videoFeedDescriptionButtons">-</div>" + html;              

    }
}

The surrounding html, keeping in mind that its being pulled from a youtube feed and then generated by a .net repeater control:

<td valign="top" style="margin: 5px 5px 5px 5px;height:auto;">
  <div class="descriptionBox" style="max-height:100px; overflow:hidden;" >
    <b>
    THE WORLDS BIGGEST PLANES!! by kieran smith</b><br />
    <br />
    by Antonov (ASTC). It was designed for the Soviet space program as a replacement for the Myasishchev M-4 'Bison' for the purpose of carrying the Energia     rocket boosters and to also be able to carry the Buran space shuttle in piggy-back mode much the same as the American Shuttle Carrier Aircraft.The An-225     first flew on 21 December, 1988. Only one An-225 is currently in service. It is commercially available for carrying ultra heavy and/or oversize freight. It     can carry up to 227 metric ...<br />
  </div>
  <a id="ctl00_ContentPlaceHolder1_Repeater1_ctl01_lnView" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Repeater1$ctl01    $lnView','')">View</a>&nbsp;&nbsp;<a id="ctl00_ContentPlaceHolder1_Repeater1_ctl01_lnAdd" 

  href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Repeater1$ctl01$lnAdd','')">Add</a>
 <br />

Answer 1

Perhaps you may have #someElement * { display: inline !important } or something similar in your CSS.

Answer 2

Turns out that somehow the scriptmanager was adding the script to the page multiple times. Sort of. I say sort of because it is outputting the script with some of the C# formatting stuff still in it. Here's what it looks like:

<script type="text/javascript">

"var overflowEls = getElementsByClass("descriptionBox"); for (var i = 0; i < overflowEls.length; i++) { if (checkOverflow(overflowEls[i])) { var html = overflowEls[i].innerHTML; overflowEls[i].innerHTML = overflowEls[i].innerHTML = "

<div class="\"onclick="\">+</div>

<div onclick="\"collapse(this);\""class="\"videoFeedDescriptionButtons\"">-</div>
"" + html;}}"

</script>

As you can see, a total mess. Anyhow,I 'solved' this by moving the script to the aspx page as a function and just having the scriptmanager output a call to the function, so now I've got an ever increasing number of function call scripts in the html head. The script does work now so I'm going to mark this as answered and open a new question to try to figure out why the scriptmanager is adding duplicates.