Question

I’m having some trouble inserting an inline element into the DOM using jQuery, because it’s being interpreted as a block element.

Here’s an example: http://jsfiddle.net/THS8s/

Answer 1

As stated above, Firebug shows the display status as “inline”. While I’m not too sure why exactly your example is behaving the way it is, one possible workaround is to include a blank placeholder span in your markup:

<dl id="first">
    <dt>Title</dt>
    <span>&nbsp;</span>
    <dd><a href="#">Click Me</a></dd>

    <div class="clear"></div>
</dl>

Adding additional spans with this markup in place doesn’t appear to suffer from the same problem (at least not in Chrome).

Perhaps you’d be better off always including the “Loading icon” span, but preset to display: hidden, only showing where necessary.