How Do I Add jQuery To Head With JavaScript?

Question

I am trying to include jQuery to an HTML page conditionally. It only needs to be added if it doesn\'t exist yet.

I am using the following code near the top of my bod

Answer 1

You are not waiting for the script to load after appending it to document

Try this code before appending:

   function helper(){
        if (typeof jQuery === 'undefined') {
            alert('jquery still not present :(');
        }
   };

   script.onreadystatechange= function () {
      if (this.readyState == 'complete') helper();
   }
   script.onload= helper;

I've found it here if you want to know more

Also there are loaders like StealJS or YepNope

Answer 2

Boilerplate uses this method to test if jQuery is loaded by google, if not use local:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

Seems like what you want to achieve :)

Answer 3

A script loads asynchronously. This means its contents are not directly available after appending the element.

Use onload instead:

script = document.createElement('script');

script.onload = function() {
    // jQuery is available now
};

script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';

head.appendChild(script);