Как динамически добавлять элементы списка в jQuery

Question

Я разрабатываю мобильное приложение, в котором я хочу заполнить ListView, как только пользователь заполнит форму и нажмите кнопку отправки.

Я знаю, как предоставить List View в jQuery, но как заполнять элементы в нем динамически во время выполнения?

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

---

В ответ на ваш комментарий: «что мне нужно на щелчок форме кнопки получает представления и Firstname, которые пользователь вводит в форму будут добавляться в список»

Во-первых, вы должны оставаться на странице после того, как форма была Отправлено. Чтобы сделать это, вы должны добавить 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();, чтобы быстро сериализовать всю информацию о форме.

Answer 2

скрипку расслоение плотной:

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