Javascript 追加到div而不替换内容，只是添加到末尾

我有以下部门：

<div id="flip" class="container">
    <div class="f-page f-cover">
        <div class="cover-elements">
            <div class="f-cover-story">
                <span>Life Events</span>
                Photo Album
            </div>
        </div>
        <div class="f-cover-flip">
            &lt; swipe
        </div>
    </div>
</div>

生活事件
相册
刷卡

我想在这个div中添加如下内容：

for(var i = events.length; i > 0 ; i -= 5 ){
                    result_html += "<div class='f-page'>";
                        result_html += "<div class='f-title'>";
                            result_html += "<a href='index.jsp'>Back to bookshelf</a>";
                            result_html += "<h2 id='event_name'>Your Life Events</h2>";
                            result_html += "<a href='#'></a>";
                        result_html += "</div>";

                        if(index < events.length){
                            result_html += "<div class='box w-25 h-70' id='top_left_box'><div class='img-cont img-1'></div><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";

                            index++;
                        }
                        if(index < events.length){

                            result_html += "<div class='box w-50 h-70 box-b-l box-b-r' id='top_center_box'><div class='img-cont img-2'></div><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /> </p></div>";
                            index++;
                        }   
                        if(index < events.length){

                            result_html += "<div class='box w-25 h-70' id='top_right_box'><div class='img-cont img-3'></div><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";

                            index++;
                        }
                        if(index < events.length){
                            result_html += "<div class='box w-50 h-30 box-b-r title-top' id='bottom_left_box'><h3>"
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";
                            index++;
                        }
                        if(index < events.length){
                            result_html += "<div class='box w-50 h-30 title-top' id='bottom_right_box'><h3>" 
                                        + events[index].name + "<span>Published " + "From: " + events[index].start_date + "to: " + events[index].end_date + "</span></h3><p>"
                                        + events[index].description + " With: " + events[index].participants[0].name + "<img src="+events[index].participants[0].pictureUrl + " /></p></div>";
                            alert("<img src="+events[index].participants[0].pictureUrl + " />");
                            index++;
                        }
                    result_html += '</div>';

                }

                result_html += "<div class='f-page f-cover-back'><div id='codrops-ad-wrapper'><a href='index.jsp' >Back to bookshelf</a></div></div>";

                $(".container").append(result_html);

                alert($(".container").html());

            });

for（变量i=events.length；i>0；i-=5）{
结果_html+=“”；
结果_html+=“”；
结果_html+=“”；
结果_html+=“你的生活事件”；
结果_html+=“”；
结果_html+=“”；
如果（索引<事件长度）{
结果_html+=“”
+事件[索引]。名称+“已发布”+“从：“+事件[索引]。开始日期+”到：“+事件[索引]。结束日期+”“
+事件[索引].description+“带：“+事件[索引]。参与者[0]。名称+”
”；
索引++；
}
如果（索引<事件长度）{
结果_html+=“”
+事件[索引]。名称+“已发布”+“从：“+事件[索引]。开始日期+”到：“+事件[索引]。结束日期+”“
+事件[索引].description+“带：“+事件[索引]。参与者[0]。名称+”
”；
索引++；
}   
如果（索引<事件长度）{
结果_html+=“”
+事件[索引]。名称+“已发布”+“从：“+事件[索引]。开始日期+”到：“+事件[索引]。结束日期+”“
+事件[索引].description+“带：“+事件[索引]。参与者[0]。名称+”
”；
索引++；
}
如果（索引<事件长度）{
结果_html+=“”
+事件[索引]。名称+“已发布”+“从：“+事件[索引]。开始日期+”到：“+事件[索引]。结束日期+”“
+事件[索引].description+“带：“+事件[索引]。参与者[0]。名称+”
”；
索引++；
}
如果（索引<事件长度）{
结果_html+=“”
+事件[索引]。名称+“已发布”+“从：“+事件[索引]。开始日期+”到：“+事件[索引]。结束日期+”“
+事件[索引].description+“带：“+事件[索引]。参与者[0]。名称+”
”；
警报（“”）；
索引++；
}
结果_html+=''；
}
结果_html+=“”；
$（“.container”）.append（result_html）；
警报（$（“.container”）.html（））；
});

现在发生的是，它只是附加了那个div

<div class="f-page f-cover">
            <div class="cover-elements">
                <div class="f-cover-story">
                    <span>Life Events</span>
                    Photo Album
                </div>
            </div>
            <div class="f-cover-flip">
                &lt; swipe
            </div>
        </div>

生活事件
相册
刷卡

当我发出

警报（$（“.container”）.html（）时，显示为空

从我在jQueryAppend函数中看到的情况来看，这应该可以工作，但它似乎是在重新标记或删除flip div的内容。为什么

编辑

这是因为我在ajaxStop jquery中执行警报

如果我在document.ready内执行此操作，它将返回内容。为什么会发生这种情况？
您可以试试

$(result_html).appendTo($('.container'));

而不是

 $(".container").append(result_html);

对我来说，它是有效的。
你能提供
events
json吗？首先，你提供的JS代码的最后一行有一个语法错误。在
}中，不需要关闭参数。应该是
}.ReferenceError:未定义事件已定义事件，当我将已硬编码的div添加到for循环时，它将打印该div。