website/js/customElements/blogIndex.js

class BlogIndex 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) => {
                    this.innerHTML += `
                    <article class="breakWord">
                        <h2>${element["title"]}</h2>
                        <p breakWord>${element["content"]}</p>
                        <p class="center"><a href="/post.html?id=${element["id"]}"><button>Mehr lesen</button></a></p>
                    </article>
                    `;
                });
                this.appendChild(ul);
            }
        }
        xhr.open("GET", "/API/getBlogElements.php?position=index");
        xhr.send();
    }
}

customElements.define("jl-blog_index", BlogIndex);