A tiny js script to include html files in html documents.
Simply include the include-html.min.js
script in your <head>
and add a data-include
attribute on any valid HTML element.
include-html will fetch the value of that attribute, and replace the element with the fetched file.
If, include-me.html
looked like this:
<h1>Hello, world!</h1>
Then, a document like this:
<head>
<script src="include-html.min.js"></script>
</head>
<body>
<div data-include="include-me.html"></div>
</body>
Would end up rendering like this:
<body>
<h1>Hello, world!</h1>
</body>
In local environments you must emulate a web server (like live server).
The script uses the XMLHttpRequest object so it only works through http requests, if you open your HTML file from your hard drive with the file protocol, the request will mark an error CORS.