JQuery UI with icon on the right side of an hyperlink

I'm trying to place an icon (using JQuery UI theme) on the right side of开发者_如何学Go an hyperlink. However the best satisfactory result I had was an Icon on the far right side of the page, and not immediately after the actual text. The easiest option would be to have an <IMG> tag after the text, but the icon needs to be styled with the current theme.

This is what I have :

....
<a href="#" id="contractLink" target="_blank" class="left-margin">
    <span id="contractLinkText">Loading...</span>
</a>
...
<script type="text/javascript">
$(function() {
   $('#contractLink')
       .append($('<div></div>')
                  .addClass('ui-icon ui-icon-newwin')
                  .css({'float':'right', 'border':'1px solid blue'})
       );
});
</script>

You can make the icon display:inline-block or display:inline. Not sure what effect that will have on the icon in certain browsers, although it will put it on the same line as the span. Since the jqueryui css makes it display:block, maybe that isn't advisable.

Alternatively, you can make the span float:left.

Both of the above work, and in both cases you should remove the float:right on the icon div.

Appending a div to an anchor tag isn't semantic HTML. The reason that the new element (div in this case, should probably change to span) is appearing to the right of the page is because you probably don't have a css width attribute on your anchor tag. If you set that, your new span will appear to the anchor's right-most boundary.

I modified your code to change the css for the div to display:inline and it acheived the effect you are looking for:

.css({'display':'inline', 'border':'1px solid blue'}));