IE8 is appending when using jQuery .html()

My co-worker and I have spent about an hour on this now and we can't figure it out. This works fine for us in Chrome and Firefox. This is basically a dumbed down version of it:

http://jsbin.com/osebuc

It works 开发者_开发百科fine in this test case, but in IE8 on our real thing it's appending the HTML. We literally just have $('.panda').html(someHtml) in the code, but in IE, instead of replacing the HTML it appends the HTML each time.

We also tried $('.panda').empty().html(someHtml) in IE, but then IE seems to "lose track" of .panda and doing a console.log($('.panda').length) returns 1, then another button click (back to the original HTML), returns 0.

Has anyone else seen this? Anyone have any ideas why this would happen?

Why:

My co-worker and I are trying to make some forms look prettier (beta form) without touching the original HTML (we can't) but have a way to go back to the original form (classic) if they click a button. To do this we cache the original HTML in a var, then we build the new, beta HTML, save it to a var, and then do the example above in a toggle.

---

I just had the very same issue: .html() in IE7 / IE8 was appending.

I managed to sort it by doing the following:

$('panda').html("").html(someHtml);

Basically, manually set it to blank, and then add the code from the ajax call.

---

Although, I persnally prefer jQuery, have you tried plain-old javascript?

$('.panda')[0].innerHTML = "";
$('.panda')[0].innerHTML = "some html";

---

had the same problem. Be sure your HTML is valid. I had a different open and closing tag ^^