如何在jQuery中动态添加列表项答案

【问题标题】：How to dynamically add List items in jQuery如何在jQuery中动态添加列表项
【发布时间】：2014-02-07 04:31:39
【问题描述】：

我正在开发一个移动应用程序，一旦用户填写表单并单击提交按钮，我想在其中填充 ListView。

我知道如何在 jQuery 中提供列表视图，但如何在运行时动态填充其中的项目？

【问题讨论】：

结帐handlebarsjs.com，我现在正在我的一个项目中做这件事。
我是新手，所以我刚刚浏览了api.jquerymobile.com/listview，但不知道如何继续。请提供一些提示
我第二次使用handlebarsjs

标签： javascript jquery

【解决方案1】：

你在寻找这样的东西吗？

jsFiddle Demo:

HTML：

<div id="listView"></div>
<input type="button" id="mybutt" value="Submit" />

javascript/jQuery:

$('#mybutt').click(function() {
    var out = '<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul>';
    $('#listView').html(out);
});

回复您的评论：“我需要的是点击按钮表单被提交，用户在表单上输入的名字将被添加到列表中”

首先，您需要在提交表单后留在页面上。为此，您应该在提交例程中添加e.preventDefault();：

$( "#target" ).submit(function( event ) {
    //Manually collect form values and 
    //Use ajax to submit form values here (see notes at bottom)
    event.preventDefault();
});

接下来，您要获取所需字段中的数据，并将其添加到<ul>。因此，将上面的内容更改为：

$( "#target" ).submit(function( event ) {
    var fn = $('#fname').val();
    $('ul').append('<li>' +fn+ '</li>');

    //Manually collect form values and 
    //Use ajax to submit form values here (see notes at bottom)
    event.preventDefault();
});

对于 AJAX 位，see this post 获取提示。

注意，您可以使用$('#formID').serialize(); 快速序列化所有表单数据。

【讨论】：

在上面的例子中，它是硬编码的项目，但我需要的是点击按钮表单被提交，用户在表单上输入的名字将被添加到列表中。

【解决方案2】：

js 小提琴：

http://jsfiddle.net/7PzcN/1/

html：

<div id="listView"></div>
<input type="text" name="firstname"/>
<input type="text" name="lastname"/>
<input type="button" id="mybutt" value="Submit" />

jquery：

$('#mybutt').click(function() {
    var out = '<ul>';
    $("input[type=text]").each(function() {
        out += "<li>" + $(this).val() + "</li>";
    });
    out += "</ul>";
    $('#listView').html(out);
});

【讨论】：