Basically what the question says. I import HTML code from an external file and append it to my main html code:
/**
* Get the HTML contents from the URL specified in the filename and add them
* to the before the bottom of the specified DOM element.
* @param {string} filename The URL of the HTML file we want to import.
* @param {DOM element} element The element to which we'll append the HTML code.
*/
function importHtml(filename, element) {
let data = fetch(filename)
.then(function(response) {
// When the page is loaded convert it to text
return response.text()
})
.then(function(html) {
// Return the HTML contents of the file.
element.insertAdjacentHTML('beforeend', html);
})
.catch(function(err) {
console.log('Failed to fetch page: ', err);
});
return data;
}
importHtml("html/includes/header.html", header);
I've tried to get access to that HTML code using:
document.addEventListener("DOMContentLoaded", function () {
const menu = document.querySelector('#menubar');
}
but it doesn't work. It has to be PURE JS.
I've looked but I can't seem to find the answer :/