Добавление нового слова «li» каждый раз, когда пользователь вводит текст и нажимает кнопку

Question

$(document).ready(function() { 
$('#btn1').click(function() { 
$('li').after($("#txt1").val()); 
}); 
}); 

Это работает, чтобы добавить текст после первого li, но когда я вхожу в новый текст, он помещает его внутри того же li - The Вопрос: Как я могу заставить jquery-код работать, чтобы каждый раз вводить новый ли?

Answer 1

Я думаю, что следующий обновленный код со скрипкой должен работать намного более гладко.

Вы должны использовать родительский элемент для li, так что вы можете использовать функцию .append()

WORKING FIDDLE

HTML

<ul> 
    <li>ok</li> 
    <li>ok</li> 
    <li>ok</li> 
    <li>ok</li> 
</ul> 
<input id="txt1" /><input type="submit" id="btn1"> 

Jquery КОД

$(document).ready(function() { 
    $('#btn1').click(function() { 
     //$('li').last().after('<li>' + $("#txt1").val() + '</li>'); 
     $("ul").append("<li>"+$("#txt1").val()+"</li>"); 
     $("#txt1").val("").focus();//This will clear previous text and set focus 
    }); 
}); 

Answer 2

Вот что вы готовы сделать:

http://jsfiddle.net/sykkadfk/5/

Вам нужно добавить <li> & </li> как сказал @Tushar, но и выбрать только last() элемент li, пожалуйста, проверьте ссылку выше демо.

$(document).ready(function() { 
    $('#btn1').click(function() { 
     $('li').last().after('<li>' + $("#txt1").val() + '</li>'); 
    }); 
});