How Can I Dynamically Apply Inline or External CSS in jQuery to Fix Chrome AJAX Styling Issues?

Dynamically Applying Inline or External CSS Using jQuery

You want to dynamically load an Ajax control into a Yahoo popup using jQuery and apply its own CSS to it. There are two options: inline or external stylesheet. However, you've discovered that in Chrome, the CSS loaded via AJAX is not evaluated when added to the DOM using the standard method.

To resolve this issue, jQuery offers several approaches to evaluate or apply stylesheets dynamically added to the DOM:

Loading Inline CSS

Using AJAX:

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});   

Loading External CSS Using Dynamically Created

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");

Loading External CSS Using Dynamically Created