Search code examples
jqueryappendhead

Move JS in between head tags


I am using this web design app, and for some reason it puts the JS (look below) in between the <body> tags and not in the head tags.

So is there any way to get this code into the HEAD tags using some form of JS?

<script type="text/javascript">
  $(document).ready(function(){
    $('body').rollbar({zIndex:100});
  });
</script>

The reason for this is, I want the jQuery plugin to apply to the 'body' div, but it doesn't work if it's in the BODY tags - but it does when it's in the HEAD tags. If there is anyway to dynamically move the code from the body tags to the HEAD tags that would be awesome. I've been wanting to know how/and if that's possible for a while now

Look forward to the responses!


Solution

  • This code:

    <script type="text/javascript">
      $(document).ready(function(){
        $('body').rollbar({zIndex:100});
      });
    </script>
    

    will work identically whether it's in the HEAD section or the BODY section as long as jQuery is loaded before it. That's because the $(document).ready causes the $('body').rollbar({zIndex:100}); not to execute until after the document is loaded which will be the same time no matter where the original code was loaded from.

    If you are seeing a difference in behavior when you move it, then something else is causing that difference that you have not disclosed because simply moving this code to the HEAD section will not cause a difference (as long as jQuery is already loaded).