使用 div javascript 創建多個博客文章

Question

我使用了以下代碼，允許創建由多個 div 組成的“博客文章”。 我希望每次單擊按鈕時都會創建一個新的博客文章，但實際發生的是沒有創建新文章，唯一改變的是 div 的內容，具體來說是contentDiv的內容。 換句話說，用戶輸入或帖子內容是唯一改變的東西。

const BtnAdd = document.getElementById("buttonpost1");
BtnAdd.addEventListener("click", AddNew);
  function AddNew() {
  var newhtml = document.getElementById("postbox").value;
  sessionStorage.setItem("page1content", newhtml);
  document.getElementById("postbox").value = "";
  location.reload();
  return false;
}
var newhtml2 = document.getElementById("profilecontent").innerHTML;
var newhtml3 = document.getElementById("underpost").innerHTML;
var newhtml4 = document.getElementById("commentcontent").innerHTML;
sessionStorage.setItem("usercontent" , newhtml2);
sessionStorage.setItem("belowcontent", newhtml3)
sessionStorage.setItem("commentcont", newhtml4)
const contentDiv = document.createElement("div");
const userDiv = document.createElement("div");
const lowerDiv = document.createElement("div");
const commentDiv = document.createElement("div");
const bigDiv = document.createElement("div");
bigDiv.classList.add("div-shadow");
contentDiv.classList.add("div-shadow2");
userDiv.classList.add("div-shadow3");
lowerDiv.classList.add("div-shadow4");
commentDiv.classList.add("div-shadow5");
userDiv.innerHTML = sessionStorage.getItem("usercontent");
contentDiv.innerHTML = sessionStorage.getItem("page1content");
lowerDiv.innerHTML = sessionStorage.getItem("belowcontent");
commentDiv.innerHTML = sessionStorage.getItem("commentcont");
var cWrapper = document.getElementById("contentwrapper");
bigDiv.appendChild(contentDiv);
bigDiv.appendChild(userDiv);
bigDiv.appendChild(lowerDiv);
bigDiv.appendChild(commentDiv);
cWrapper.appendChild(bigDiv);

每次用戶單擊 id buttonpost1的按鈕時，我應該進行哪些更改以允許創建新的博客文章，而不僅僅是覆蓋現有文章（div）的內容？

Answer 1

我在您的AddNew function 中看不到任何appendChild ，每次調用AddNew function 時，您都需要創建和 append 新元素。

這是一個最小的例子：

 const container = document.querySelector('#container'); const button = document.querySelector('button'); button.addEventListener('click', () => { addNewPost(); }); function addNewPost() { const newPost = document.createElement('div'); newPost.innerText = 'New Post'; container.appendChild(newPost); }

 <button type="button">Add New Post</button> <div id="container"></div>