title: Phonegap & jQuery Mobile, how to change html of content instead of page?
body: <p>I'm using a static footer and a header. I set the contents of these using javascript. They're dynamic.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div data-role="page" id="page"&gt;
  
          &lt;div data-role="header"&gt;
              &lt;h1&gt;App name&lt;/h1&gt;
          &lt;/div&gt;&lt;!-- /header --&gt;
  
          &lt;div data-role="content" id="content"&gt;  
              &lt;p&gt;Loading...&lt;/p&gt;
          &lt;/div&gt;&lt;!-- /content --&gt;
  
          &lt;div data-role="footer" data-position="fixed"&gt;
              &lt;div data-role="navbar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" id="menu1"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" id="menu2"&gt;Menu2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" id="menu3"&gt;Menu3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /footer --&gt;
      &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I catch the click events on the menu items and I start out using <code>$("#page").live('pageinit', mainMenu);</code></p>
  
  <p>Then I'd like to change the <code>$("#content")</code> html using the following:</p>
  
  <pre><code>$.mobile.changePage( "main-menu.html", { transition: "slideup" } );
  </code></pre>
  
  <p>This however changes the entire page. How do I set it to only change the contents of <code>#content</code>?</p>