Insert header and footer on all webpages using javascript

Question

I have created index.html file and added header and footer sections. I want to show them on my other pages like about, contact but I don't want to copy them on all webpages. Please guide me how can I do it using vanilla JavaScript.

Answer 1

Another may be simpler way of writing JavaScript

const headerElement = document.querySelector("header");
const footerElement = document.querySelector("footer");

const fetchHeader = async () => {
  try {
    const res = await fetch("./header.txt");
    const template = await res.text();

    headerElement.innerHTML = template;
  } catch (err) {
    console.log(err);
  }
};

const fetchFooter = async () => {
  try {
    const res = await fetch("./footer.txt");
    const template = await res.text();

    footerElement.innerHTML = template;
  } catch (err) {
    console.log(err);
  }
};

fetchHeader();
fetchFooter();