html5 - How to change the particular part of a page dynamically using jquery? -

i have page header, content , footer.

<div data-role="page" id="home">  <div data-role="header">  </div>  <div data-role="content" id="1">  </div>  <div data-role="footer">  </div> </div> 

now want change content part in page , header, footer same in home page another page also.

<div data-role="page" id="page1">  <div data-role="header">  </div>  <div data-role="content" id="2">  </div>  <div data-role="footer">  </div> </div> 

thanks in advance.

updated:

for example: have page multiple options in fiddle http://jsfiddle.net/fccyc/1/ .if want click on particular button if click on bookmark button content replace change header , footer same.and if click on mapview content change header , footer same , map.js file has load map.

$('#1').load('another_page.html #2');