Usé el siguiente código que permite crear una "publicación de blog" que se compone de múltiples divs. Quiero que cada vez que hago clic en el botón se cree una nueva publicación de blog, pero lo que realmente sucede es que no se crean nuevas publicaciones y lo único que cambia es el contenido de los divs, para ser específicos, el contenido de contentDiv . En otras palabras, la entrada del usuario o el contenido de la publicación es lo único que cambia.
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); ¿Qué cambios debo hacer para permitir la creación de una nueva publicación de blog cada vez que el usuario hace clic en el botón de id buttonpost1 y no solo anular el contenido de la publicación existente (divs)?
No veo ningún appendChild en su función AddNew , necesita crear y agregar nuevos elementos cada vez que se llama a la función AddNew .
Este es un ejemplo mínimo:
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>