How to push HTML element into Template?

1

I am using Framework7 5 with webpack and PWA engine.
I Have initial page that initialized normally and display “items” (which load from object) div and “cart” div,

whenever item clicked I need to push HTML element to the “cart” div Like:

<div class="newItem>
    <div id="item_name>Item Name</div>
    <div id="item_Price">10$</div>
    <div id="item_qty>3</div>
    ..
</div>

and so on, item div is complicated with lot of styles and options that are formated through JS script i have,
My question is: What is the best way to prepare the HTM element template before I work on with JS file and push it to the main page?
I though of prepare it in separate Template component file, but was not able to access its elements from the JS file to format it as required.
Any hep is much appreciated

2

Use Router Component https://framework7.io/docs/router-component.html and manage your DOM state by component data state

1 Like
3

Thanks a lot, Yes I think that is the way I have to go!
though I was looking for something like and then import it inside JS file rather than {{}} f7.html .
Thanks again.