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?