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

Question

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

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

Answer 1

您是否正在寻找这样的东西？

jsFiddle演示：

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位， 请参阅这篇文章以获取提示。

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

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