My website uses this in the frame.html head so it appears globally:
<!--START: infopages-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#15').load("../assets/15.html");
$('#16').load("../assets/16.html");
$('#17').load("../assets/17.html");
$('#18').load("../assets/18.html");
$('#19').load("../assets/19.html");
$('#20').load("../assets/20.html");
});
</script>
<!--END: infopages-->
Other individual pages/places will have a reference like this (different pages make use of different ids):
<div id="19"></div>
So the content from those numbered HTML pages load where the div appears.
BUT …I was told I should no longer use jQuery and instead I should use querySelector and modules. The problem is I am not at all familiar with that. Can someone please help me with how I should code the above using querySelector & modules? Or is there a better way?
I tried to educate myself on how this should work but not finding good examples on the web. Seems like this should be fairly straight forward?
Stuff Things is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
I’m not aware of any vanilla JS function that loads a URL into an element like that, but you can easily implement it yourself with fetch and getElementById.
<div id="19"></div>
<script>
async function loadInto(id, url) {
let response = await fetch(url);
if (!response.ok) throw new Error("request failed with status " + response.status);
let body = await response.text();
document.getElementById(id).innerHTML = body;
}
// Usage:
loadInto("19", "a.html")
</script>
Note that this assumes the .html files are fragments/elements, not full HTML files.
11
You can replace jQuery load with this function in a file named e.g. htmlLoader.js:
export async function loadHTML(selector, file) {
try {
const response = await fetch(`../assets/${file}`);
if (!response.ok) throw new Error('Failed to read file ' + file);
const content = await response.text();
document.querySelector(selector).innerHTML = content;
} catch (error) {
console.error('Error loading the HTML file:', error);
}
}
And then use it like this:
<div id="p15"></div>
<div id="p16"></div>
<div id="p17"></div>
<div id="p18"></div>
<div id="p19"></div>
<div id="p20"></div>
<script type="module">
import { loadHTML } from './htmlLoader.js';
document.addEventListener("DOMContentLoaded", () => {
loadHTML('#p15', '15.html');
loadHTML('#p16', '16.html');
loadHTML('#p17', '17.html');
loadHTML('#p18', '18.html');
loadHTML('#p19', '19.html');
loadHTML('#p20', '20.html');
});
</script>
I tried it and it works.
Notes:
- The JS part that wants to do
importhas to usetype="module". - I had to change the IDs because querySelector does not accept
'#15'.
An alternative might be to use getElementById() instead (without the#).
5