使用jQuery将响应附加到单个HTML元素而无需重复

Question

我正在尝试将每个表单提交的结果存储到其自己的单独HTML元素中。我的代码正在执行此操作，但是它也在复制结果。有没有一种方法可以将结果仅添加一次，而不是添加到所有匹配的类中，而无需创建唯一可识别的元素（例如card1，card2，card3）。

    <form id='userForm' method="POST">
<input class="textbox" type='text' name='query' placeholder='Question' value="" />

        <input type='submit' value='Submit' />
    </form>

    <div class="responses"></div>
   <script>
    $(document).ready(function(){
        $('#userForm').submit(function(){
            var question = $(".textbox").val();
            $.ajax({
                type: 'POST',
                url: '/dev/post.php',
                data: $(this).serialize()
            })
            .done(function(data){
                $( "<div class='response'><div class='question'></div><div class='answer'></div></div>").appendTo( ".responses" );
                $('.question').append(question);
                $('.answer').append(data);
            })
            .fail(function() {
                alert( "Whoops, there's been a problem with getting the answer." );
            });

            return false;
        });
    });
    </script>

Answer 1

使用last()-

$('.question').last().append(question);
$('.answer').last().append(data);