首页 > 解决方案 > 在前一个子 div 的 jquery 之前添加一个新的子 div

问题描述

我正在尝试做一个简单的媒体发布项目。当新记录添加到数据库中时,我使用 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);   
});

标签: javascriptjqueryajax

解决方案


.append您可以使用代替 using ,.prepend它正是为此目的而制作的:

将参数指定的内容插入到匹配元素集中每个元素的开头。

因此,您可以使用以下代码:

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

推荐阅读