Html Question posted in
Some basic documentation can be found here.

How to insert HTML using querySelector & modules?

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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:

    1. The JS part that wants to do import has to use type="module".
    2. I had to change the IDs because querySelector does not accept '#15'.
      An alternative might be to use getElementById() instead (without the #).
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search