Question

I was wondering if anyone knows of an efficient pattern for dynamically loading html. jQuery’s load method allows a developer to load html into a specified element. I would like to insert the html before a certain element. For example

html

<div>
   <div class ="child">
   </div>
</div>

jQuery

 jQuery('div.child').load('ex.html');

Result

 <div>
   <div class ="child">
        <!-- ex.html -->
   </div> 
 </div>

Desired Result

<div>
   <!-- ex.html -->
   <div class ="child">  
   </div> 
 </div>

I know about insertBefore and methods of this nature. But this means I have to download html into one spont and the move it all again into another spot. Does anyone have any good solutions? Thanks

Answer 1

I believe this will give you the proper result:

$GET('ex.html', function(html){
  if(html){
    jQuery('div.child').parent.prepend(html);
 }

});