async js loading sequence
<p>I am trying to do something that uses the async loading pattern as bellow:</p>

<pre><code>&lt;div id="mydiv"&gt;
    &lt;script type="text/javascript"&gt;
        var test = .......;
        function() {
            var js = document.createElement('script');
            js.async = true;
            js.src = 'myscript.js';
            var first = document.getElementsByTagName('script')[0];
            first.parentNode.insertBefore(js, first);
         })();
    &lt;/script&gt;
&lt;div&gt;
</code></pre>

<p>Then inside myscript.js I work on the assumption that the div with id mydiv is guaranteed available when it myscript.js is executed.  Is this assumption valid? It sounds really should be the case. But i sometimes run into situation the code couldn't find the div inside myscript.js.</p>

<p>Also regarding the general page loading. does all the  tags get loaded first? what happens when this async loading pattern happens? does it get loaded after all the original  tags gets loaded first?</p>

<p>Thanks,</p>
