Então, eu estava tentando criar um sistema rudimentar de "postagens" com um histórico onde todas ficariam armazenadas, porém, percebi que havia um problema o qual eu não conseguia resolver, que era o fato das postagens mais recentes serem criadas abaixo das mais antigas.
No caso, a ideia era que cada nova "postagem" sobrepusesse a anterior de forma à mais recente estar sempre no topo do histórico.
Exemplo do resultado visualizado no histórico
No caso dos códigos tudo o que eu fiz foi:
CSS
div#newDivSpace {
border: 1px solid #aaa;
min-height: 30px;
width: 240px;
margin-top: 10px;
margin-left: 5px;
}
.post {
margin-bottom: 1px;
padding: 5px;
border-bottom: 1px solid #aaa;
}
HTML
<form action="#">
<input type="text" id="userText">
<button type="button" id="divGenerator" onclick="newDiv()">Criar div</button>
</form>
<div id="newDivSpace"></div>
Javascript
var input = document.getElementById("userText");
var button = document.getElementById("divGenerator");
var space = document.getElementById("newDivSpace");
var post = document.getElementsByClassName("post");
function newDiv() {
var newDiv = document.createElement("div");
var userInput = input.value;
if (userInput != "") {
newDiv.innerHTML = userInput;
newDiv.classList.add("post");
space.appendChild(newDiv);
input.value = "";
}
Se for possível ajudar com a implementação de um sistema no qual a mensagem mais recente esteja sempre no topo do histórico sera de grande ajuda.