Is it possible to import HTML using JavaScript?

by

Here’s how you could use just javascript to add a footer to your page.

2022 code, using fetch and insertAdjacentHTML:

async function addFooter() {
    const resp = await fetch("footer.htm");
    const html = await resp.text();
    document.body.insertAdjacentHTML("beforeend", html);
}

Original 2011 code, using XMLHttpRequest and innerHTML:

var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function () {
    document.body.innerHTML += ajax.responseText;
}
ajax.open("GET", "footer.htm");
ajax.send();

The 2011 code will still work in all browsers today, but fetch is more intuitive, and allows you to avoid coding an event handler callback. insertAdjacentHTML is also available for all browsers, so you could use that or innerHTML with either example. Only fetch is new, and won’t work in IE without a polyfill.

More Related Contents:

  1. How to read with JavaScript [closed]
  2. how to view the answer of a js function in a html input? [duplicate]
  3. How to implement something like this GIF that using mouse drag and select items
  4. Javascript counting all the characters from a HTML document
  5. Submit form without page reloading
  6. Submit two forms with one button
  7. Is there a spec that the id of elements should be made global variable?
  8. Disabling browser print options (headers, footers, margins) from page?
  9. Double quote in JavaScript string
  10. How can I capture the right-click event in JavaScript? [duplicate]
  11. Selecting all text in HTML text input when clicked
  12. Is it possible to trap CORS errors?
  13. Stop embedded youtube iframe?
  14. Infinity Loop Slider Concepts
  15. Where should I put the CSS and Javascript code in an HTML webpage?
  16. Why does Jquery only affect the first div element? [duplicate]
  17. DOMException: Failed to load because no supported source was found
  18. How to mute an html5 video player using jQuery
  19. Where’s the connection between index.html and index.js in a Create-React-App application?
  20. Focus Input Box On Load
  21. event.clipboardData.setData in copy event
  22. how to exchange variables between two HTML pages?
  23. why is jQuery click event firing multiple times
  24. How to get the JSON with duplicate keys completely in javascript
  25. Can I use the id of an HTML element as a variable in JavaScript? [duplicate]
  26. How to hide optgroup/option elements?
  27. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  28. When to access the attribute (vs the property)?
  29. How to get element by class name
  30. HTML5: Detecting if you’re on mobile or pc with javascript? [duplicate]

Leave a Comment