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

Question

I have a page with header, content and 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 I want to change the content part which is in another page and the header, footer is same as in home page for 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: I have a page with multiple options like in the fiddle http://jsfiddle.net/fCcyc/1/ .If I want to click on the particular button like If i click on the Bookmark button only the content will replace change header and footer is same.And If i click on the Mapview only content will change header and footer is same and map.js file has to load for the map.

Answer 1

for this you can create header and footer file diffenly. Then create your pages and include the header and footer in it. Then for content use jQuery for checking page is home or other pages. You can check url from following way :

suppose that you have a page with this address: http://sub.domain.com/page.htm. use the following in page code to achive those results:

    window.location.host : you'll get sub.domain.com:8080 or sub.domain.com:80
    window.location.hostname : you'll get sub.domain.com
    window.location.protocol : you'll get http:
    window.location.port : you'll get 8080 or 80
    window.location.origin : you'll get http://sub.domain.com

For your case :

   if(window.location.hostname == "home page url") {

        <div data-role="content" id="1">
        </div>
    } else {
        <div data-role="content" id="2">
       </div>
   }

Answer 2

You can load it with AJAX. You'll need to do some programming if you keep want to use browser history or deep linking.

To change the content:

$('#content').load('page.html');

Answer 3

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