The app I am working on requires dynamic loading of css and js, right now the solution is as follows:

myapp.loadCss = function(css){
       $("head").append("<link>");
       cssDom = $("head").children(":last");
       cssDom.attr({rel:  "stylesheet",
                 type: "text/css",
                 href: css
                });  
}

myapp.loadJs = funciton(js){
...
//$.ajax call is used in synchronized mode to make sure the js is fully loaded 
}

}

When some widgets need to be load, the usual call with be

myapp.loadCss('/widgets/widget1/css/example.css');
myapp.loadJs('/wiggets/widget1/js/example.js');

The weired thing is that once a while (1 out of 10 or 20), the newly created dom elements from example.js will not be able to get its css from example.css, it seems however my loadCss method does not load the css in a synchronized mode? I have tried to replace my loadCss with the the following code:

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

}

It seems to be OK then (I refreshed the webpage a hundred times for verification :-( ) But unfortunately this method failed in IE(IE7, not tested in IE6, 8)

Is there any better solution for this?