jQuery Mobile：为所有页面使用相同的页眉

我试图实现一些代码,它将在我的所有网页上创建页眉和页脚,而不是对它们进行硬编码.我试过这个：

我在我的“主页”中我已经这样做了.

<div id="headerProto">
   <div data-role="header" data-position="fixed" data-theme="b">
       <h1> title </h1>          
   </div> 
</div>

然后在其他页面我有：

<div class="headerChild">
</div>

我补充说：

$(".headerChild").html($("#headerProto").html());

没有骰子.无论哪种方式,都是我应该如何做的总猜想.有没有更好的办法？

$('.headerChild').load('pathto/headerProto.html')

$('.headerChild').load('pathto/mainPage.html #headerProto')