jQuery replace html in span

Is there an issue with replacing the contents of a <span in jQuery.

I have this;

<span class='DimensionList'>
 开发者_运维技巧 some html
</span>

and

$('.DimensionList').html("<b>This is the new html</b>");

What I'm finding is that in FF the contents of the span are being added to. So the new HTML sits above the old.

In IE6, yes I have to cater for it, it's doing much the same.

EDIT

I have edited the question to show that there is html in the replacement html

Since there's no markup in your replacement text, use text() instead of html():

$('.DimensionList').text("This is the new html");

if you needed to use .html() you could empty it first: $('.DimensionList').html("").html("<b>This is the new html</b>");

You've capitalized DimensionList in your javascript and it is lowercase in your HTML source. They need to be identical. In other words, it is case sensitive.

Have you tried .text() ? It is similar to .html()

From jQuery's Documentation:

Unlike the .html() method, .text() can be used in both XML and HTML documents

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), which replaces special characters with their HTML entity equivalents (such as < for <).

http://api.jquery.com/text/