generate footer with pure js

js/customElements/footer.js

@@ -20,28 +20,67 @@ class Footer extends HTMLElement {
                 "icon": "twitter"
             }
         ];
-        this.innerHTML = `
-            <footer>
-                <div id="blueBar"></div>
-                <div id="footerContent">
-                    <div>
-                        <a href="/datenschutzerklaerung.html">Datenschutzerkl&auml;rung</a><br>
-                        <a href="/bildquellen.html">Bildquellen</a><br>
-                        <a href="/impressum.html">Impressum</a><br>
-                        <a href="//gitlab.jonasled.de/jonasled/website">Quellcode</a><br>
-                    </div>
-                    <div id="newestPost">
-                        <h3>Neueste Beitr&auml;ge:</h3>
-                        <jl-footer_blog></jl-footer_blog>
-                    </div>
-                    <div class="center">
-                        <p class="center" id="socialButtonsContainer"> 
-                        </p>
-                    </div>
-                </div>
-            </footer>
-        `;
-        const socialButtonsContainer = this.querySelector("#socialButtonsContainer");
+        this.links = [
+            {
+            "name": "Datenschutzerklärung",
+            "link": "/datenschutzerklaerung.html"
+            },
+            {
+            "name": "Bildquellen",
+            "link": "/bildquellen.html"
+            },
+            {
+            "name": "Impressum",
+            "link": "/impressum.html"
+            },
+            {
+            "name": "Quellcode",
+            "link": "//gitlab.jonasled.de/jonasled/website"
+            }
+        ]
+        const footer = document.createElement("footer");
+        this.appendChild(footer);
+
+        const blueBar = document.createElement("div");
+        blueBar.id = "blueBar";
+        footer.appendChild(blueBar);
+
+        const footerContent = document.createElement("div");
+        footerContent.id = "footerContent";
+        footer.appendChild(footerContent);
+
+        const footerLinks = document.createElement("div");
+        footerContent.appendChild(footerLinks);
+
+        this.links.forEach(link => {
+            const linkElement = document.createElement("a");
+            linkElement.href = link["link"];
+            linkElement.innerText = link["name"];
+            footerLinks.appendChild(linkElement);
+
+            const linebreak = document.createElement("br");
+            footerLinks.appendChild(linebreak);
+        });
+
+        const footerPostDiv = document.createElement("div");
+        footerPostDiv.id = "newestPost";
+        footerContent.appendChild(footerPostDiv);
+
+        const postHeadline = document.createElement("h3");
+        postHeadline.innerText = "Neueste Beiträge";
+        footerPostDiv.appendChild(postHeadline);
+
+        const footerPost = document.createElement("jl-footer_blog");
+        footerPostDiv.appendChild(footerPost);
+
+        const footerIconDiv = document.createElement("div");
+        footerIconDiv.className = "center";
+        footerContent.appendChild(footerIconDiv);
+
+        const socialButtonsContainer = document.createElement("p");
+        socialButtonsContainer.className = "center";
+        footerIconDiv.appendChild(socialButtonsContainer);
+
         this.socialButtons.forEach(button => {
             const link = document.createElement("a");
             link.href = button["link"];