.append новый div с картинками в нем

Question

Я кодирую приложение Flask с использованием AJAX. Пользователь делает запрос, и каждый раз ответ появляется в новом 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.pictures); прежде чем вы выбрали все div.pictures; см .last ()

$("#chatbox").append( "<p class = display_question>"+data['user_question']+"</p>" );                            
$("#user_form")[0].reset();
$("#chatbox").append("<div class = pictures> </div>");       

// Append pictures to last element of class .pictures only
$(".pictures").last().append($('<img id = wiki_img>').attr('src', data['wiki_pic']));
$(".pictures").last().append($('<img id = img>').attr('src', data['response']));        

$("#chatbox").append( "<p class = wikidata>"+data['wiki_data']+"</p>" );