Jquery Mobile: Embed external HTML file without iframe

How can I load a external html page in a div?

    <div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
   <!--Load nav.html here-->
  </div> 
...

I have tried with following code but it doesn't function.

$( "#myPanel" ).load( "nav.html" );

See: http://plnkr.co/edit/N6xTrvLHWdOMG9Lq?open=lib%2Findex.html

Solution

The panel is expecting some markup as content, not a whole HTML page.

This will load Your navigation listview inside the panel:

$(document).on('panelcreate', '#myPanel', function () {
    $(this).children(".ui-panel-inner").load("nav.html ul", function() {
        $(this).enhanceWithin().trigger("updatelayout");
    });      
});

The full-width listview is requiring some additional CSS:

/* The left reveal panel shadow is 5px inset and blurred by 5px */
.ui-panel-display-reveal.ui-panel-position-left .ui-listview {
    margin-right: -10px;
}

EDIT:

To test Your navigation menu and see if it looks as intended, You may design it directly inside the panel. To allow the framework to create the panelInner, simply put somewhat inside the panel div, i.e. a placeholder div or, as said, even better the static version of Your navigation menu. Thus, it will be then correctly replaced by Your external version.

In one word, instead of  write <div>...</div>.