javascript - Jquery load doesn't load DOM elements immediately -

i have html content as

<div id="externalcontent"></div> <script src="jquery.js"></script> <script>     console.log("the number of div elements before loading tempfile " +$("div").length)     $('#externalcontent').load('tempfile.html')     console.log("the number of div elements after loading tempfile " + $("div").length)     $('#externalcontent').append('temp.html contents loaded above...')     settimeout(function(){         console.log("the number of div elements in page after timeout " + $("div").length)     }, 5000) </script> 

it simple stuff. loads external file, tempfile.html has 1000 div elements using $.load, , prints number of div elements in console.

the output is,

the number of div elements before loading tempfile 1 number of div elements in page after loading tempfile 1 number of div elements in page after timeout 1001 

so, why second log statement printed after $.load show number of elements one? if dom loading (via $.load, $("...").html("blah..blah..") etc...) asynchronous task, how can ensure dom gets loaded completely?

note: tempfile.html bulk file has 1000 div elements as,

<div id="1">1</div><div id="2">2</div><div id="3">3</div>..... <div id="1000">1000</div> 

you should use callback function, because request asynchronous.

$('#externalcontent').load('tempfile.html', null, function() {     console.log("the number of div elements after loading tempfile " + $("div").length); }); 

see jquery api documentation.