How Can I Dynamically Apply Inline or External CSS with jQuery for AJAX Content?

Dynamically Applying Inline or External CSS with jQuery

When integrating Ajax content into a page using jQuery, it becomes necessary to manage the CSS applied to that content. This article explores methods for applying inline CSS or dynamically loading external CSS stylesheets to ensure proper presentation of the loaded content.

Problem

Loading Ajax content into a Yahoo popup using jQuery's .get method causes issues with dynamically generated CSS being applied. Chrome does not evaluate CSS added to the DOM inline, but Internet Explorer does. Finding a way to evaluate CSS loaded dynamically as either inline or external is essential.

Solution

jQuery provides several methods for dynamically loading and evaluating CSS:

Loading Inline CSS with AJAX

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

Loading External CSS with a Dynamically Created

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

Loading External CSS with a Dynamically Created