jQuery Mobile: используйте один и тот же нижний колонтитул для всех страниц

Я пытаюсь реализовать некоторый код, который будет создавать верхние и нижние колонтитулы на всех моих веб-страницах вместо того, чтобы жестко кодировать их. . Я попробовал это:

У меня было это на моей «главной странице», которую я только что назвал, обернув заголовок, который я хотел, в div.

<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());

Никаких игральных костей. В любом случае, это было полное предположение о том, как я должен это сделать. Есть ли лучший способ?