Question

Twofold question.

Using a web template that utilizes AJAX for loading new pages, rather than traditional point-the-browser-to-the-url style, how would one go about adding new script or style tags to the page head as necessary?

I think using jQuery $(‘head’).append(script); works just fine, but (and here’s the second half), if I wanted to group all of the scripts that were page-dependent away from those that are universal across the site – how would I do that?

Using a div sounds so enticing since I could print it at the initial page render and just call
$('head div.external').append(script), but still probably a bad idea inside the head.

Is there any other element or method I could use to group these? The goal being to easily remove all of them when the user navigates away from the current page. A smaller consideration is that Google Analytic instructs you to place it at the end of the head tag (I’ll be honest, I don’t know why being the last script matters), and I don’t want my scripts to interfere. Do these even need to be in the head, could I place a div at the end of the body and use that?

Answer 1

Surely the easiest way to do this, if it is necessary, is with classes:

$(script).addClass('external').appendTo('head');

then later:

$('script.external').remove();

I’m honestly not sure what this would achieve, however.