CODEWITHSUNDEEP
jquery
griegs
griegs

Reputation: 22760

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

Upvotes: 13

Views: 61434

Answers (4)

user2377420
user2377420

Reputation:

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

Upvotes: 4

hybernaut
hybernaut

Reputation: 636

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

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

Upvotes: 22

JustcallmeDrago
JustcallmeDrago

Reputation: 1885

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/

Upvotes: 0

Jared
Jared

Reputation: 2457

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.

Upvotes: 2

Related Questions