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 (e.g., 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?

score 0 · Answer 1 · answered Oct 24 '21 at 12:33

0

There are different approaches for your Problen:

use fetch() to load your data when needed from the server and then render it in to the view.
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.

answered Oct 24 '21 at 12:33

Willi Pasternak

456
2
12

With 1., when you say server, do you mean back-end server? I am only doing front-end for this task. Would it still work? – Louis.vgn Oct 24 '21 at 12:55
so where do you get your data from ? – Willi Pasternak Oct 24 '21 at 13:29
I guess from the server then…? – Louis.vgn Oct 24 '21 at 13:36
Ok so I used [this answer](https://stackoverflow.com/a/50812705/16674436) to fetch my document, but the issue I have is that I get the following `[object HTMLDocument]`. But what I want is to have the content of the `HTMLDocument`. How can I get it? – Louis.vgn Oct 24 '21 at 13:55
You need to add the HTML Document to the dom. You can use `document. insertAdjacentHTML` to add the stringContent to the dom. – Willi Pasternak Oct 25 '21 at 17:55

Import html module with JS

1 Answers1