How to include style, js, meta etc elements into section from a single file using jQuery?

Question

What I already know:

I use single file each for header and footer that I include in all the pages by using:

<script>
   $(function(){
     $("#header").load("header.html");
     $("#footer").load("footer.html");
}
</script>

and adding this in the <body> section:

<body>    
<div id="header"></div>
<div id="footer"></div>
</body>

Required:

I want to keep the following in a single separate file and include in all pages' <head> section.

<script type="text/javascript" src="signupjs/jquery.reveal.js"></script>
<link rel="stylesheet" href="signupjs/reveal.css">
<!-- some more elements -->

I tried applying the known method, ie, .load() and <div id=""></div> in <head> section but as obvious, it didn't work. The contents got loaded in the <body> section.

Is there a technique to achieve this?

Application: This might help me spend more time on designing than copying same tags again and again in all pages.

_$(yourHiddenDiv).load()_ **and then** _$("head").append($(yourHiddenDiv).html())_ — , Feb 24 '15 at 12:08

score 2 · Accepted Answer · edited Feb 24 '15 at 12:04

2

Html

<head>

// we can append here

</head>

Jquery

$('head').append('<link rel="stylesheet" type="text/css" href="signupjs/reveal.css">');

$('head').append('<script type="text/javascript" src="signupjs/jquery.reveal.js"></script>');

edited Feb 24 '15 at 12:04

Jim Jeffries

9,841
15
62
103

answered Feb 24 '15 at 11:57

I'm Geeker

4,601
5
22
41

1

that would be in the `body` too – Yerko Palma Feb 24 '15 at 12:00
Thanks a lot @CodingCracker There was one problem though. How to inlcude: `` using jQuery. If it's not possible, what's the alternative? – Prashant Mishra Feb 25 '15 at 13:53

score 0 · Answer 2 · edited May 23 '17 at 12:12

As said on this question, you can add your css like this

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );

You can do the same for javascript, but you also have a few other options. You can use $.getScript of jQuery, or you can use requirejs. I recommend require.js, with that librarie you can do

var librari = require("js/librarie.js");

How to include style, js, meta etc elements into section from a single file using jQuery?

2 Answers2