innerHTML Quirk / List Items With Inline Display
With this markup…
<ul id="list">
<li class="tag">a</li>
<li class="tag">b</li>
</ul>…and this CSS…
li.tag {
display: inline;
}… everything looks fine. You get a list that says “a b” as you’d expect.
However, if you do…
document.getElementById("list").innerHTML = '<li class="tag">a</li>n<li class="tag">b</li>'In Gecko you’ll get your “a b” but in IE 6 you’ll get “ab”. No spacing.
After a half-dozen sanity checks (and no help from Google), I tried…
document.getElementById("list").innerHTML = '<span>a</span>n<span>b</span>'And got “a b” in IE 6. Apparently, the implementers of innerHTML figured that whitespace was meaningless between list items, forgetting that you could change the display style.
Setting the display style for a list item, and generating new list items via innerHTML was a freaky edge case back in 2000. It’s not anymore.
Funny how, after five years the only thing that’s changed is the acceptance.
Fortunantly for me, I hacked my client side templating language to also build content using DOM, so I don’t have to change the symantics of my markup. I can change the means to generate it with the flip of a swtich (or the change of an element name). More later.