Error in IE when inserting values to empty spans

[Stale]

When you insert value to an empty span in IE, the browser will not add the needed space between spans.

Example:

function btnclick()
{
document.getElementById("sp2").innerHTML="KING"
}
</script>
<span id="sp1">Elvis</span>
<span id="sp2"></span>
<span id="sp3">Presley</span>
<input type="button" onclick="btnclick()" />
 

When you push the button, "KING" is inserted in the secong span, like this

Elvis KINGPresley

with no space between KING and Presley

Anyone knows a way around this?

[rrocket]

The quickest way is probably to just add a space before King for after Elvis... Like "Elvis " or " King".

[drhowarddrfine]

<span> is used to apply properties to the contents in between. You have no content so nothing happens. <span> cannot create content.

[Stale]

OK, but the main problem is that IE shows the result differently if YOU write "KING" inside the span or if the SCRIPT writes "KING" inside the span.

[drhowarddrfine]

It depends on when it is inserted between the spans. Is the property assigned and then you insert the text, or vice versa? If after the property is assigned, then that's the problem.

[Stale]

Thanks for your reply.

But: What property?

[Stale]

<span> is used to apply properties to the contents in between. You have no content so nothing happens. <span> cannot create content.

What propery?
How can I set this property?

[drhowarddrfine]

I meant the id which, I assume, is used to set a CSS property to the span.