jQuery Mobile: How to refresh page with dynamic DOM manipulation?

Question

I created a page with jQuery Mobile, and tried to add content dynamically:

    $(function () {

        $("#deviceTarget").sortable({
            revert: true
        });

        $("body > div[data-role='page']").append($("<div data-role='header' data-theme='a' data-position='fixed'><h1>Header</h1></div>"));
        $("body > div[data-role='page']").append($("<div data-role='footer' data-theme='a' data-position='fixed'><h1>Footer</h1></div>"));
        $.mobile.activePage.trigger("create");

    });

    $(document).bind('mobileinit',function(){
        $.mobile.defaultPageTransition = 'none';
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
      });

    function refreshPage() {
        $.mobile.activePage.trigger("create");
    }

But I got the result (image).

I want to get the result (image).

How can I do?

Thanks.

Solution

all you need to do is to refresh the page

not sure about this code:

    $.mobile.activePage.trigger("refresh");

but it should work. Otherwise take a look at this jquerymobile.com article.