Question

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

关于如何让它发挥作用的任何想法？

由于

以下是代码：

$("#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

使用append，并可能在末尾添加<br />代码：

jsFiddle here

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

Answer 3

您可以结合使用jQuery的append和元素创建方法来使事情更加清晰：

$("#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和.date div中创建一个包含指定类的div。

Answer 4

您应该使用append()方法。如果你想要垂直列表

，请在之前设置一个换行符

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

添加到包含表单内容的列表

4 个答案: