diff --git a/js/customElements/commentsDisplay.js b/js/customElements/commentsDisplay.js index 4c9a7600dfb46a6bb1c2bc324dc8948f02f633e3..fb86044c742ba74f0564f867bfe7642093dae57d 100644 --- a/js/customElements/commentsDisplay.js +++ b/js/customElements/commentsDisplay.js @@ -10,15 +10,28 @@ class commentsDisplay extends HTMLElement { if (xhr.status === 200) { let comments = JSON.parse(xhr.responseText); comments.forEach((element) => { - this.innerHTML += ` - <h3 class="commentTitle">${element["name"]}</h3> - <div class="comment"> - <img src="${element["gravatarURL"]}"> - <article class="commentArticle"> - <p class="commentText">${element["comment"]}</p> - </article> - </div> - `; + const h3 = document.createElement("h3"); + h3.classList.add("commentTitle"); + h3.innerText = element["name"]; + this.appendChild(h3); + + const commentDiv = document.createElement("div"); + commentDiv.classList.add("comment"); + this.appendChild(commentDiv); + + const image = document.createElement("img"); + image.src = element["gravatarURL"]; + commentDiv.appendChild(image); + + const article = document.createElement("article"); + article.classList.add("commentArticle"); + commentDiv.appendChild(article); + + const commentText = document.createElement("p"); + commentText.classList.add("commentText"); + commentText.innerText = element["comment"]; + article.appendChild(commentText); + }); } else { let p = document.createElement("p"); @@ -33,4 +46,4 @@ class commentsDisplay extends HTMLElement { } } -customElements.define("jl-comments_display", commentsDisplay); \ No newline at end of file +customElements.define("jl-comments_display", commentsDisplay);