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

add to list with contents from form

本文关键字：列表 包含 表单 添加      更新时间：2023-09-26

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

关于如何让它发挥作用有什么想法吗？

感谢

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

这是代码：

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

更改

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

至

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

您可以使用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和.datediv中创建一个具有指定类的div。

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

jsFiddle此处

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

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

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