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();
});