Как получить вновь созданные элементы сверху

Question

Итак, я работаю над личным проектом, который представляет собой простое обновление статуса. Я постоянно добавляю больше функциональности, но я уже давно застрял. Проблема в том, что всякий раз, когда кто-то публикует новый статус, я хочу, чтобы это отображалось сверху, однако первое, что написано выше, является первым созданным сообщением, что является проблемой. Это означало бы, что вам придется прокручивать вниз, чтобы увидеть последнее сообщение.

Скриншоты:

Main page

Problem occurs, new element goes underneath old

Здесь вы JavaScript:

function statusPost() { 
    status = document.getElementById("Status").value; 

    if (status == "") { 
     alert("Please write a status") 
    } 
    else { 
     document.getElementById("Status").value = ""; 
     div = document.createElement("div"); 
     document.getElementById("container").appendChild(div); 
     div.className = "update"; 
     div.innerHTML = status; 
    } 
} 

Answer 1

вместо добавления div в конце container, вы должны prepend его с помощью insertBefore

здесь ваш измененный код (я сохранил некоторые ссылки на элементы, чтобы сохранить читаемость)

var status = document.getElementById("Status"); 
var container = document.getElementById("container"); 

function statusPost() { 
    if (status.value == "") { 
     alert("Please write a status") 
    } else { 
     status.value = ""; 
     div = document.createElement("div"); 
     div.className = "update"; 
     div.innerHTML = status; 
     container.insertBefore(div, container.firstChild); 
    } 
} 

Answer 2

Используйте InsertBefore() вместо AppendChild()

Проверьте это здесь:

W3school link

Answer 3

Если вы используете jquery, вы можете использовать метод prepend() для достижения этого. Данные придут вверху. Preppend

<h2>Greetings</h2> 
<div class="container"> 
    <div class="inner">Hello</div> 
</div> 
$(".inner").prepend("<p>Test</p>"); 

Если вам это нужно в Java Script Пожалуйста, попробуйте

insertBefore