Question

I’m trying to implement some code that will create the headers and footers on all of my web pages instead of hard coding them. I tried this:

I had this in my “main page” I just called wrapped the header I wanted in a div.

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

Then in the other pages I had:

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

And I added:

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

No dice. Either way that was a total guess on how I’m supposed to do it. Is there a better way?

Answer 1

Using .load() may help, then just put the code you want to include in the file you are linking to.

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

An alternative way if you do not want to keep the data in a separate file:
I have not done this but from some quick research you can also link to an element within the file.

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