如何動態創建帶有Jquery輸入的附加文本ulli

Question

我有一個帶有添加按鈕的文本輸入的表單。當您點擊添加按鈕時，它會從輸入中獲取文本，並將其放在另一個div中。我需要它在一個動態創建的無序列表中，該列表還將輸入內的文本置於其中。我需要的輸出看起來像

<ul> <li>text from input</li> <li>text from input again</li> </ul>

林不知道如何正確地將追加到創建列表和文本追加內。我可以很容易地獲得文本值並將其輸出到列表中。任何關於追加的幫助都會很大。

Answer 1

HTML：

<input type="test" id="inputName" /> 
<button id="btnName">Click me!</button> 

<ul class="justList"></ul> 

JS：

$('#btnName').click(function(){ 
    var text = $('#inputName').val(); 
    if(text.length){ 
     $('<li />', {html: text}).appendTo('ul.justList') 
    } 
}); 

以下是演示：

http://jsfiddle.net/J5nCS/

UPDATE：

您的意見：

這裏是網址：

http://jsfiddle.net/J5nCS/1/

$('#btnName').click(function(){ 
    var text = $('#inputName').val() + '<button>x</button>'; 
    if(text.length){ 
     $('<li />', {html: text}).appendTo('ul.justList') 
    } 
}); 

$('ul').on('click','button' , function(el){ 
    $(this).parent().remove() 
}); 

Answer 2

這樣的事情？

$("#yourbutton").click(function() { 
    //uncomment this if you want to wipe the list before adding the LI node: 
    //$("#yourUL").empty(); 

    $("#yourUL").append("<li>" + $("#yourinputtextbox").val() + "</li>"); 
}); 

Answer 3

您正在尋找的jQuery appendTo()

$("button").click(function(){ 
    $("<li>"+$("input").val()+"</li>").appendTo("ul"); 
}); 

演示：http://jsfiddle.net/u74Ag/

---

這可能是有用的

• http://api.jquery.com/appendTo/
• http://api.jquery.com/append/