Import html module with JS

Question

New to coding and new to JavaScript.

I have a simple web page where I have a menu with different items ( eg, results, and analysis). When you click on one of the item, say “results”, I want it to display within the same web page (without reloading) a piece of another HTML page containing the results, which is in another file . Why? Because the results content will be too large to write it in the main.js , so the html needs to be loaded from a different HTML file.

I am thinking (but there may be other ways to do it) of importing the results.html with JavaScript with an event listener. But I'm not sure how to do that. With an HTML module?

Answer 1

There are different approaches for your Problen:

1. use fetch() to load your data when needed from the server and then render it in to the view.
2. use a dynmaic import with import( ... ) and load the whole module including your data and the view

my personal opinion is to go with 1. and just load your data when you need it.