JQuery Mobile panels and headers in multiple pages

In a jqm multipage project I often want to use a header, footer or navigation panel across several pages. How do I do this without repeating the markup for each page? Well, my solution is to write the markup only once on the main page, and then on the pagebeforecreate event clone it to all the other pages.

Take a nav panel for example:

<div data-role="page" id="index">
<div data-role="panel" data-position-fixed="true" data-theme="a" id="nav-panel">
            <ul data-role="listview" data-theme="a" class="nav-search">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                    <li><a href="#" data-destination="#home">Home</a></li>
                    <li><a href="#" data-destination="#search">Search</a></li>
                    <li><a href="#" data-destination="#about">About</a></li>
            </ul>
</div> 
 <!-- etc.... -->

And then in subsequent pages I add a div with a suitable classname to identify it:

<div data-role="page" id="search">
        <div class="navPanelChild"></div>
<!-- etc.... -->

And then on the pagebeforecreate event of the first page of the app I clone the nav panel and replace all the child containers with it:

$(document).delegate("#index", "pagebeforecreate", function () {
      var navpanelCopy = $( "#nav-panel" ).clone();
      $( ".navPanelChild" ).replaceWith(navpanelCopy);
});