javascript - lively load js and css on the head using append -

for reason, load css , scripts on head tag using "append" e.g.

$("head").append('<script type="application/javascript" src="core/js/main.js"></script>'); 

i'm pulling html contents asynchronously ("ajax way") , due contents have specific styles , script functions needed thats why load script , css along it.

here's code (refer below)

$.ajax({     url : 'page_loader.php',     datatype: 'html',     data : { page_name : 'test' },     type: 'get',     beforesend : function(){         //show spinner         $("#spinner").show();     },     success : function(data){         //before load contents, load css first         $("head").append('<link rel="stylesheet" type="text/css" href="core/css/main.css" />');         //load pulled html contents div has id of ajax_page         $("#ajax_page").html(data);         //then load script on head         $("head").append('<script type="application/javascript" src="core/js/main.js"></script>');         //hide spinner         $("#spinner").hide();     } }); 

everything works fine, don't want script , link duplicated or multiplied every content load can see i'm using append every time ajax function called, script , css has appended on head tag duplicated (assume ajax function called twice or more) want prevent it, there way called load once? or okay load multiple times (ajax run more once)?

ps: im trying putting id on link , script check if did exist, if is, don't load, else, load it. valid put id on link tag or script tag?

jquery has getscript function js files can use.

description: load javascript file server using http request, execute it.

jquery.getscript(      url,      function(data, textstatus, jqxhr) {      }); 

reading material:

getscript