。在其中添加图片的新div

Question

我正在使用AJAX编写Flask应用程序。用户进行查询，每次答案出现在新的div中；例如，他要一个地方，然后该应用会显示该地方的两张图片以及维基百科的文章。问题是，每当用户进行查询时，在前一个div中也会显示两张图片，在最后一个div中也只显示最后一张div。

    $("#chatbox").append( "<p class = display_question>"+data['user_question']+"</p>" );                            
    $("#user_form")[0].reset();
    $("#chatbox").append("<div class = pictures> </div>");       
    $(".pictures").append($('<img id = wiki_img>').attr('src', data['wiki_pic']));
    $(".pictures").append($('<img id = img>').attr('src', data['response']));        
    $("#chatbox").append( "<p class = wikidata>"+data['wiki_data']+"</p>" ); 

是否有一种方法可以在div中添加两张图片而不将它们添加到前一张图片中？

Answer 1

在div元素内创建一个空的#chatbox，它将保存响应

示例：

<div id="chatbox">
    <div id="response"></div>
</div>

并且在js中，您可以在添加之前清空response元素：

$("#response").empty();
$("#response").append( "<p class = display_question>"+data['user_question']+"</p>" );                            
$("#user_form")[0].reset();
$("#response").append("<div class = pictures> </div>");       
$(".pictures").append($('<img id = wiki_img>').attr('src', data['wiki_pic']));
$(".pictures").append($('<img id = img>').attr('src', data['response']));        
$("#response").append( "<p class = wikidata>"+data['wiki_data']+"</p>" );