so I obtained a piece of html code from a PHP site that returns the following:
<span class="inline-icon link-icon with-fav" style="background: url("/system/files/imagecache/s_favicon/attachments/links/favicons-201203/1d5920f4b44b27a802bd77c4f0536f5a_48.png?1332860368") no-repeat scroll 0% 0% transparent;"></span>
and then I appended it to a page using javascript
$('.container').append(variableContainingTheStringAbove);
but then the icon does not display properly and when I inspected element using firebug, the thing instead displays like this:
<span class="inline-icon link-icon with-fav" transparent;"="" 0%="" scroll="" no-repeat="" 1d5920f4b44b27a802bd77c4f0536f5a_48.png?1332860368")="" favicons-201203="" links="" attachments="" s_favicon="" imagecache="" files="" system="" style="background: url("></span>
what could have possibly gone wrong
Easily spotted once syntax coloring is applied — you need to use single quotes in your inline style instead of nested double-quotes.
Better yet, use an external class instead of inline styles at all.