Last active 1737603604

This is kinda like including a component in a JS framework using the "import" function, but with vanilla JavaScript.

component.html Raw
1<p>Did it work?</p>
include.js Raw
1function includeHTML() {
2 var z, i, elmnt, file, xhttp;
3 z = document.getElementsByTagName("*");
4 for (i = 0; i < z.length; i++) {
5 elmnt = z[i];
6 file = elmnt.getAttribute("include-html");
7 if (file) {
8 xhttp = new XMLHttpRequest();
9 xhttp.onreadystatechange = function() {
10 if (this.readyState == 4) {
11 if (this.status == 200) {elmnt.innerHTML = this.responseText;}
12 if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
13 elmnt.removeAttribute("include-html");
14 includeHTML();
15 }
16 }
17 xhttp.open("GET", file, true);
18 xhttp.send();
19 return;
20 }
21 }
22}
index.html Raw
1<div include-html="./component.html"></div>
2<script>includeHTML()</script>