.Text () and .html () methods in jQuery whitespace running through spaces in IE7?

Question

I am using jQuery to insert text inside an HTML tag. The HTML code is as follows:

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

The jQuery code to insert text inside the span tag is as follows:

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

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

<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 space ends after the span tag, resulting in text on the screen that says: " Do you want to send a message to Thomasright now? "

I tried using both .html () and .text (), but there is no difference in the results.

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

Thanks in advance!

/ Thomas Kahn

Answer 1

<span id='firstName'></span> <span id='firstName'>&nbsp;</span> . ^^

^{^ IE 7}

Answer 2

, :

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