javascript - クリック時にhtml要素を追加する

Question

入力「テキスト」の値をhtmlにレンダリングする非常に単純な関数があります。

<form>
    <input type="text" class='test'><input type='submit' value='send'>
</form>
<div class='test2'> </div>

<script>   
    $("form").submit(function() {
        var value = $('.test').val();
        $('.test2').html(value);
    });
</script>

「送信」を押すたびに、新しい値が古い値に置き換わります。古いメッセージを削除せずに、その上に新しいメッセージを表示したいと思います。つまり、送信ボタンをクリックするたびに「DIV」または「P」を追加したいと思います。

ご協力ありがとうございました。

Answer 1

このようにしてみてください

$("form").submit(function() {
    var value = $('.test').val();
    $('.test2').append('<p>' + value + '</p>');
});

Answer 2

jsBinデモ

$("form").submit(function(e) { 
  e.preventDefault();
  $('<div>',{ text: $('.test').val() }).appendTo('.test2');
  $('form').get(0).reset();
});