Подготовьте новый дочерний div перед jquery предыдущего дочернего div

Question

Я пытаюсь сделать простой проект публикации в СМИ.Когда новые записи добавляются в базу данных, я использую ajax, чтобы добавить новый дочерний div к родительскому div на основе информации в записи.У меня это работает, за исключением порядка, в котором добавляются дочерние элементы. Выполнение предварительного добавления не помещает новый div в качестве первого дочернего элемента родительского div, а помещает его в качестве последнего дочернего элемента указанного родительского элемента.Это не хорошо, когда я хочу, чтобы новые сообщения отображались сверху.Вот код файла, над которым я работаю.Как мне добавить ранее добавленных детей?

$(document).ready(function (){
    setInterval(function(){
       $.ajax({
           type: 'GET',
           url: 'JSONFile.php',
           data: { get_param: 'value' }, 
           dataType: 'json',
           success: function(retrieved){
               //$("#MainContent").empty();
               $.each(retrieved, function(index, i){
                   $('#MainContent').append('<br><div class="Post"><h2>' + i.UserName + '</h2><br><p>' + i.Content + '</p></div>');
               });
           }
       });
    },3000);   
});

Answer 1

Вместо использования .append вы можете использовать .prepend, который был сделан именно для этой цели:

Вставить содержимое, указанное параметром, вначало каждого элемента в наборе совпадающих элементов.

Итак, вы можете использовать код:

$.each(retrieved, function(index, i){
  $('#MainContent').prepend('<br><div class="Post"><h2>' + i.UserName + '</h2><br><p>' + i.Content + '</p></div>');
});