how to use jquery inject html markup in any app?

Question

I want to inject html markup into a div in multiple sites in different platforms. Ideally it would look something like this where each developer can insert a script tag to my js. Lets assume each application has bootstrap and jquery.

<script id="globalheaderapi" src="https://www.url.com/globalheader.js"></script>

and html would only be something like this on the applications

<header id="globalHeader"></header>

I want to insert my html markup inside header. I would also want to js to insert link to css source.

The question is, the apps only have jquery.

 $( document ).ready(function() {
  //insert link to header css   
    $('head').append('<link rel="stylesheet" href="globlalHeader.min.css" type="text/css" />');

 //insert html in div
 $( "#globalHeader" ).html( "<nav><ul><li><a href="link">Home</li><li><a href="link">About</li></ul></nav>" );
 });

Update

I tried $( "#globalHeader" ).load(... and it works if js and the app is in the same domain if i try it in a different domain i get the crosssite error

   XMLHttpRequest cannot load http://url . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

Answer 1

Taking for granted that there is a decent enough reason in your environment to not just use server side includes or something more straightforward, jQuery's .load() seems like it would suit you. You'd just stub out the HTML you'd want to inject and have each page call it like this:

$("#globalHeader").load('globalHeader.html');

Your CSS injection looks fine, though I'm curious why if you have access to the site to insert a script tag you can't just add the link tag.