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/

更新：

征求意见：

这是网址：

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/

这可能很有用

如何使用Jquery从输入中动态创建带有附加文本的ul li

3 个答案: