Update data in HTML view from JS using Framework7

Question

How does one update data in an already loaded HTML view using JS in Framework7. I am able to use Framework7 to load new data from JS to a new page, e.g via a popup or creating a new page by doing:

// HTML Content of new page:
var newPageContent = '<div class="page" data-page="my-page">' +
        '<div class="page-content">' +
        JS_VARIABLE +
        '<p>Here comes new page</p>' +
        '</div>' +
        '</div>';

//Load new content as new page
mainView.router.loadContent(newPageContent);

But I don't want to load a new page, just update the current page. Ive tried using a virtual-list but I get a "TypeError", TypeError: o[w].trim is not a function. (In 'o[w].trim()', 'o[w].trim' is undefined), which is reported as an issue in the Framework7 github. I use virtual list as per documentation, like this:

//JS
var myList = myApp.virtualList('.list-block.virtual-list', {
    items: [1,2,3,4],
    height: 44
    });
//HTML
 <!-- Virtual List -->
 <div class="list-block virtual-list">
    <!-- keep it empty -->
 </div>

So, I "simply" want to extend my current page with a div which can hold data which is served and updated from JS. How do I do that with Framework7?

Thanks!

Answer 1

For updating data of an existing element in the page, you can use:

$$('.element-class').html("<div>my new data</div>");