Voy a tratar de ser lo más preciso posible, estoy haciendo esto de crear una publicación y, básicamente, el usuario ingresa su nombre de usuario y lo que quiera decir en #addPost, y se "publica" en #mainBody. Ahora que esto está funcionando, quiero poder crear otra publicación sin eliminar mi publicación anterior. Quiero que simplemente baje.
let add = document.getElementById("addPost") let usrInp = document.getElementById("username__input") let pstInp = document.getElementById("post__input") let usr = document.getElementById("username__post") let pst = document.getElementById("post__published") let post__body = document.getElementById("mainBody") let post = document.getElementById("post") function Post(){ let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == ""){ alert("Empty Field") return false } usr.innerHTML = usrInp.value pst.innerHTML = pstInp.value post__body.style.border = "1px solid lightgray" post__body.style.borderRadius = "10px" if (usrInpStr.length > 0 && pstInpStr.length > 0){ usrInp.value = "" pstInp.value = "" post.style.background = "rgb(37, 202, 31)" post.innerHTML = "Posted ✔️" } } <div id="addPost"> <div class="title">Create new post <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i> </div> <div class="name"> <input type="Name__Post" placeholder="Username" id="username__input" required> </div> <div class="post"> <textarea placeholder="What's on your mind?" id="post__input"></textarea> </div> <div> <button type="submit" onclick="Post()" id="post">Post</button> </div> </div> <div id="mainBody"> <div class="username"> <span id="username__post"></span> </div> <div class="date"></div> <div class="post"> <p id="post__published"></p> </div> </div>Puede agregar los nuevos valores en un contenedor (#myList) después de cada envío.
let add = document.getElementById("addPost") let usrInp = document.getElementById("username__input") let pstInp = document.getElementById("post__input") let usr = document.getElementById("username__post") let pst = document.getElementById("post__published") let post__body = document.getElementById("mainBody") let post = document.getElementById("post") function Post(){ let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == ""){ alert("Empty Field") return false } // usr.innerHTML = usrInp.value // pst.innerHTML = pstInp.value // this lines var node = document.createElement("LI"); var textnode = document.createTextNode(usrInp.value + ' - '); var textnode2 = document.createTextNode(pstInp.value); node.appendChild(textnode); node.appendChild(textnode2); document.getElementById("myList").appendChild(node); // // -- post__body.style.border = "1px solid lightgray" post__body.style.borderRadius = "10px" if (usrInpStr.length > 0 && pstInpStr.length > 0){ usrInp.value = "" pstInp.value = "" post.style.background = "rgb(37, 202, 31)" post.innerHTML = "Posted ✔️" } } <div id="addPost"> <div class="title">Create new post <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i> </div> <div class="name"> <input type="Name__Post" placeholder="Username" id="username__input" required> </div> <div class="post"> <textarea placeholder="What's on your mind?" id="post__input"></textarea> </div> <div> <button type="submit" onclick="Post()" id="post">Post</button> </div> </div> <div id="mainBody"> <div class="username"> <span id="username__post"></span> </div> <div class="date"></div> <div class="post"> <p id="post__published"></p> </div> </div> <!-- this line --> <ul id="myList"></ul> let add = document.getElementById("addPost") let usrInp = document.getElementById("username__input") let pstInp = document.getElementById("post__input") let usr = document.getElementById("username__post") let pst = document.getElementById("post__published") let post__body = document.getElementById("mainBody") let post = document.getElementById("post") function Post(){ let pstInpStr = pstInp.value let usrInpStr = usrInp.value if (usrInpStr == "" || pstInpStr == ""){ alert("Empty Field") return false } // usr.innerHTML = usrInp.value // pst.innerHTML = pstInp.value let htmll = `<div style = "border: 1px solid lightgray; border-radius: 10px; margin-bottom:10px; padding:20px;"> <div> <span>`+ usrInp.value +`</span> </div> <div class="date"></div> <div class="post"><p>`+ pstInp.value +`</p></div> </div>`; post__body.innerHTML += htmll; // post__body.style.border = "1px solid lightgray" // post__body.style.borderRadius = "10px" if (usrInpStr.length > 0 && pstInpStr.length > 0){ usrInp.value = "" pstInp.value = "" post.style.background = "rgb(37, 202, 31)" post.innerHTML = "Posted ✔️" } } <div id="addPost"> <div class="title">Create new post <i class="fas fa-times" onclick="showPost()" style="color: rgb(227, 69, 41);;"></i> </div> <div class="name"> <input type="Name__Post" placeholder="Username" id="username__input" required> </div> <div class="post"> <textarea placeholder="What's on your mind?" id="post__input"></textarea> </div> <div> <button type="submit" onclick="Post()" id="post">Post</button> </div> </div> <div id="mainBody"> </div>Aquí hay un ejemplo de lo que quería decir en mi comentario anterior.
Tome nota del elemento de la template . Esto permite una especificación muy fácil y legible del contenido que se agregará dinámicamente. En lugar de un montón de llamadas document.createElemnt y someElement.appendChild , simplemente duplicamos el contenido de la plantilla y luego lo completamos antes de agregarlo al cuerpo.
Comprobación de errores eliminada por brevedad.
<!doctype html> <html> <head> <script> "use strict"; function byId(id){return document.getElementById(id);} window.addEventListener('load', onLoad, false); function onLoad(evt) { byId('addPostBtn').addEventListener('click', onPostBtnClicked, false); } function onPostBtnClicked(evt) { let userInput = byId('username__input'); let commentInput = byId('post__input'); let newNode = byId('commentTemplate').content.cloneNode(true); newNode.querySelector('.user').textContent = userInput.value; newNode.querySelector('.date').textContent = 'date posted'; newNode.querySelector('.comment').textContent = commentInput.value; document.body.appendChild(newNode); userInput.value = ''; commentInput.value = ''; } </script> <template id='commentTemplate'> <div class='userComment'> <div class='user'></div> <div class='date'></div> <div class='comment'></div> </div> </template> <style> .userComment { margin-bottom: 16px; border: solid 2px #888; } </style> </head> <body> <div id="addPost"> <div class="title">Create new post</div> <div class="name"> <input type="Name__Post" placeholder="Username" id="username__input" required> </div> <div class="post"> <textarea placeholder="What's on your mind?" id="post__input"></textarea> </div> <div> <button id="addPostBtn">Post Comment</button> </div> </div> </body> </html>