Methods .text() and .html() in jQuery strip trailing whitespace in IE7?

Question

I'm using jQuery to insert text inside a HTML tag. The HTML code looks like this:

<h5>Do you want to send a message to <span id='firstName'></span> right now?</h5>

The jQuery code for inserting the text inside the span tag looks like this:

var myFirstName = "Thomas";
$("h5 span.firstName").html(myFirstName);

When I run this code in Firefox, Chrome, Safari or IE8 the result is this:

<h5>Do you want to send a message to <span id='firstName'>Thomas</span> right now?</h5>

But in Internet Explorer 7, the result is this:

<h5>Do you want to send a message to <span id='firstName'>Thomas</span>right now?</h5>

The trailing white space after the span tag is stripped resulting in a text on-screen that reads: "Do you want to send a message to Thomasright now?".

I've tried using both .html() and .text() but there is no difference in the result.

Is there a way to fix this bug? Is it a known bug in jQuery/IE7?

Thanks in advance!

/Thomas Kahn

Answer 1

making <span id='firstName'></span> to <span id='firstName'>&nbsp;</span> will fixed the problem. ^^

simple demo page

^{^ open this on IE 7}

Answer 2

That is strange but you can do this:

var myFirstName = "Thomas ";
$("h5 span.firstName").html(myFirstName);