diff --git a/js/customElements/blogIndex.js b/js/customElements/blogIndex.js
index d6f11a7803aa131bbc25fb49912c3f8f9f222f1b..665cb346cc245b34fb31f11a3ba2253ea236836c 100644
--- a/js/customElements/blogIndex.js
+++ b/js/customElements/blogIndex.js
@@ -2,21 +2,36 @@ class BlogIndex extends HTMLElement {
     constructor() {
         super();
         let xhr = new XMLHttpRequest();
-        let ul = document.createElement("ul");
         xhr.onreadystatechange = () => {
             if (xhr.readyState === 4) {
                 if (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>
-                    `;
+                        const article = document.createElement("article");
+                        article.classList.add("breakWord");
+                        this.appendChild(article);
+
+                        const h2 = document.createElement("h2");
+                        h2.innerText = element["title"];
+                        article.appendChild(h2);
+
+                        const content = document.createElement("p");
+                        content.classList.appendChild("breakWord");
+                        content.innerHTML = element["content"];
+                        article.appendChild(content);
+
+                        const moreP = document.createElement("p");
+                        moreP.classList.add("center");
+                        article.appendChild(moreP);
+
+                        const moreLink = document.createElement("a");
+                        moreLink.href = "/post.html?id=" + element["id"];
+                        moreP.appendChild(moreLink);
+
+                        const moreButton = document.createElement("button");
+                        moreButton.innerText = "Mehr lesen";
+                        moreLink.appendChild(moreButton);
                     });
-                    this.appendChild(ul);
 
                 } else {
                     let p = document.createElement("p");
@@ -31,4 +46,4 @@ class BlogIndex extends HTMLElement {
     }
 }
 
-customElements.define("jl-blog_index", BlogIndex);
\ No newline at end of file
+customElements.define("jl-blog_index", BlogIndex);