I am trying to build a small, modular Vanilla SPA JS project and I am using JS modules for this.
The structure of my project is as follows:
/index.html
/index.js
/js
/mypage.js
/pages
/mypage.html
mypage.html
<head>
<script src="../js/mypage.js" type="module"></script>
</head>
<div>whatever content here</div>
mypage.js
console.log('mypage module has loaded')
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./index.js" type="module"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
index.js loads mypage.html through a fetch request, then sets the content of the #app div like so:
const content = await fetch(/pages/mypage.html).then(data => data.text())
document.getElementById('app').innerHTML = content