How to append two or more files to the DOM with AJAX?

[bendqh1]

On top of my website’s directory I store a few files which I want to load into the DOM (HTML and its resources).

I can load (append/inject) the external HTML file this way:

const whereToLoad = document.querySelector("body");
const ajax = new XMLHttpRequest();
ajax.open("GET", "/index.html", false);
ajax.send();
whereToLoad.innerHTML += ajax.responseText;

This pattern allows me to load just one file (index.html) but I also need to load a few more files such as an image file and a CSS file.

[Thallius]

And where is the problem? do an AJAX request for each file you need and concatenate the results before adding to the DOM

[bendqh1]

My problem is that I prefer to call all files from one AJAX request but something like the following syntax didn’t work for me:

ajax.open(
"GET",
"/index.html", 
"image.svg", 
false
);

[Thallius]

No this is not possible. One Request one file…