Cannot insert new HTML to BODY of the page

Question

I'm trying to implement simple "single page application" under Multi device hubrid apps. After pressing a button (and doing some ajax POST query), i'm trying to insert new HTML into 'body':

var finalHtml = '<header class="bar bar-nav">' +
    '<h1 class="title">Some text</h1>' +
'</header>' +
'<div class="content">' +
'</div>';
console.log('Rendering: ' + finalHtml);
$('body').html(finalHtml);

Nothing happens. I see (while debugging) that inner HTML of the body changes, but after all, page becomes as previous. I tried

document.body.insertAdjacentHTML('afterbegin', finalHtml);

or

document.getElementById('appbody').innerHTML = finalHtml;

but it doesn't work.

What i'm missing?

UPDATE: At the end of updating page, Javascript console output is:

HTML1300: Navigation occurred File: index.html

Looks like page is refreshed, by some reason. Why could it be? HTML part:

    <form>

        <input type="text" id="login" placeholder="Login" autofocus>
        <input type="text" id="pass" placeholder="Password">
        <button class="btn btn-primary btn-block" onclick="try_login(document.getElementById('login').value, document.getElementById('pass').value, device.platform + ' ' + device.version);">
            Login
        </button>

    </form>

Javascript part:

function try_login(username, password, dev) {

var parameters = '';

jQuery.ajax({
    type: "POST",
    url: "http://some_url/Services/Authorize",
    data: JSON.stringify(parameters),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    crossDomain: true,
    cache: false,
    processdata: true,
    success: function (msg) {
        renderView(DataView(msg));
    },
    error: function (obj, errorMessage) {
        renderView(LoginView() + ErrorView(errorMessage));
    },

});
};

Answer 1

Problem solved! Button in form refreshes the page, so I added type="button" to button on form. Solution found here: prevent refresh of page when button inside form clicked