blogFooter.js

class blogFooter extends HTMLElement {
    constructor(){
        super();
        let xhr = new XMLHttpRequest();
        let ul = document.createElement("ul");
        xhr.onreadystatechange = () => {
            if(xhr.readyState === 4 && xhr.status === 200){
                let blog = JSON.parse(xhr.responseText);
                blog.forEach((element) => {
                    let li = document.createElement("li");
                    let a = document.createElement("a");
                    a.href = "/post.html?id=" + element["id"];
                    a.innerText = element["title"];
                    li.appendChild(a);
                    ul.appendChild(li);
                });
                this.appendChild(ul);
            }
        }
        xhr.open("GET", "/API/getBlogElements.php?position=footer");
        xhr.send();
    }
}

customElements.define("jl-footer_blog", blogFooter);