I'm creating a chat but the only problem I need is to put the effect that characterizes a chat and is that the messages go from bottom to top.
I have it like this:
recently published
no.2
no.3
- send message -
but I want it to be like this:
no.2
no.1
recently published
- send message -
Should we modify the css? How do I achieve it?
In this example I have made a new p created in the chat every time a message is written, and that way each new p is placed under the previous one, you have much to improve in this code but I hope that you serve to get what you want.
var chat = document.getElementById("chat");
function enviar() {
var p = document.createElement("p");
chat.appendChild(p);
p.innerHTML = document.getElementById("input").value;
}.chat {width:150px;height:150px;border: 1px solid black;}<div class="chat" id="chat">
</div>
<input type="text" id="input">
<input type="button" id="boton" value="Enviar" onclick="enviar()">You can make it when you have the new message add it to the container and attach what you already had.
For example: JS
var text = document.getElementById("contenedor");
text.innerHTML = nuevoMensage + text.textContent;
if you put it like that
text.innerHTML = text.textContent + nuevoMensage;
will be appended to the end.
Greetings