Question

For example, bootstrap put the jQuery at the end of the html, e.g. http://twitter.github.com/bootstrap/examples/starter-template.html

What if, you want to insert a code block before the loading of jQuery script itself, e.g.

<div id="test1"></div> 
<div id="test2"></div> 

<script>
   $(document).ready(function() {
     $('#test1').html('test1'); // not work, any workaround? the code must be put before..
   });
</script> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
   $(document).ready(function() {
     $('#test2').html('test2'); // work
   });
</script>   

Test: http://jsfiddle.net/e5HKZ/

I want both test1 & test2 also displayed.

Any idea?

Answer 1

If you really have to put jQuery code before the line that loads jQuery itself, assign the function to document.ready.

window.document.ready = function() {
    $('#test1').html('test1');
};

When jQuery has been loaded, it reads the variable and executes the function at DOM ready.

Note that this is most likely undocumented behavior and might not work reliably or in future jQuery versions.

Demo: http://jsfiddle.net/e5HKZ/1/