How to create a functional post history?

Question

So I was trying to create a rudimentary system of "posts" with a history where they would all be stored, but I realized that there was a problem that I couldn’t solve, which was the fact that the most recent posts were created below the oldest.

In this case, the idea was that each new "post" would override the previous one so that the latest one would always be at the top of the history.

Example of the output displayed in the history

In the case of codes all I did was:

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 = "";
        }

If it is possible to help with the implementation of a system where the latest message is always at the top of the history sera great help.

Answer 1

Try using the insertBefore

Syntax

var elementoInserido = elementoPai.insertBefore(novoElemento, elementoDeReferencia);

If elementDeference for null, new element will be inserted at the end of child node list.

• elementInserted - The node being inserted, which is newElement
• elementPai - Father of the newly inserted node.
• new element - The node to be inserted.
• elementDeference - The node before which the new element will be inserted.

Example

<div id="elementoPai">
  <span id="elementoFilho">foo bar</span>
</div>

<script>
// Cria um novo elemento <span> vazio
var sp1 = document.createElement("span");

// Guarda a referência do elemento atraś do qual nos queremos inserir o novo elemento
var sp2 = document.getElementById("elementoFilho");
// Guarda a referência do elemento pai
var divPai = sp2.parentNode;

// Insere o novo elemento no DOM antes de sp2
divPai.insertBefore(sp1, sp2);
</script>

There is no insertAfter method. But it can be emulated by combining the insertBefore method with nextSibling.

In the above example, sp1 could be inserted after sp2 in this way:

divPai.insertBefore(sp1, sp2.nextSibling);

If sp2 does not have a next node, it must be the last child - sp2.nextSibling returns null, and sp1 is inserted at the end of the child node list (right after sp2).

as seen in Mozilla Developers