title: jQuery Mobile: How to refresh page with dynamic DOM manipulation?
body: <p>I created a page with jQuery Mobile, and tried to add content dynamically:</p>
  
  <pre><code>    $(function () {
  
          $("#deviceTarget").sortable({
              revert: true
          });
  
          $("body &gt; div[data-role='page']").append($("&lt;div data-role='header' data-theme='a' data-position='fixed'&gt;&lt;h1&gt;Header&lt;/h1&gt;&lt;/div&gt;"));
          $("body &gt; div[data-role='page']").append($("&lt;div data-role='footer' data-theme='a' data-position='fixed'&gt;&lt;h1&gt;Footer&lt;/h1&gt;&lt;/div&gt;"));
          $.mobile.activePage.trigger("create");
  
      });
  
      $(document).bind('mobileinit',function(){
          $.mobile.defaultPageTransition = 'none';
          $.mobile.selectmenu.prototype.options.nativeMenu = false;
        });
  
      function refreshPage() {
          $.mobile.activePage.trigger("create");
      }
  </code></pre>
  
  <p>But I got the <a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/424393_409029825780260_100000197393281_1956109_912724228_n.jpg" rel="nofollow" title="Actual Result">result</a> (image).</p>
  
  <p>I want to get the <a href="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc6/64059_409029232446986_100000197393281_1956102_1115844522_n.jpg" rel="nofollow" title="Expected Result">result</a> (image).</p>
  
  <p>How can I do?</p>
  
  <p>Thanks.</p>