javascript - 使用表单中的内容添加到列表

Question

我有一个表格，用户可以输入标题和日期。当用户单击“添加新”按钮时，表单的内容应显示在上方。该部分有效，但每当他们输入新信息时，以前的内容就会被替换......它应该添加到列表中。

关于如何让它工作的任何想法？

谢谢

这是 jsFiddle：http: //jsfiddle.net/beqqC/1/

这是代码：

$("#add").on('click', function () {
    $(".title").html($("[name=title]").val());
    $(".date").html($("[name=date]").val());
    $("#view").show();
});

Answer 1

改变

$(".title").html($("[name=title]").val());
$(".date").html($("[name=date]").val());

至

$(".title").append($("[name=title]").val());
$(".date").append($("[name=date]").val());

Answer 2

使用追加，也许<br />在末尾添加一个代码：

jsFiddle在这里

$("#add").on('click', function () {
    $(".title").append($("[name=title]").val()+'<br />');
    $(".date").append($("[name=date]").val()+'<br />');
    $("#view").show();
});

Answer 3

您可以结合使用 jQuery 的 append 和 element 创建方法来使事情变得更简洁：

$("#add").on('click', function () {
    $(".title").append(
        $('<div>', {
           text: $("[name=title]").val(), 
           className: 'title'
        }));
    $(".date").append($('<div>', {
        text: $("[name=date]").val(), 
        className: "date"
    }));
    $("#view").show();
});

jsfiddle

.title这将在您的和div中创建一个具有指定类的.datediv。

Answer 4

你应该使用append()方法。如果你想要垂直列表，只需在前面放一个换行符

 $("#add").on('click', function () {
        $(".title").append("<br />" + $("[name=title]").val());
        $(".date").append("<br />" + $("[name=date]").val());
        $("#view").show();
    });