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

【问题标题】：How to dynamically create a ul li with appended text from input with Jquery如何使用Jquery从输入中动态创建带有附加文本的ul li
【发布时间】：2013-01-28 11:09:08
【问题描述】：

我有一个带有添加按钮的文本输入表单。当您单击添加按钮时，它会从输入中获取文本并将其放在另一个 div 中。我需要它位于动态创建的无序列表中，该列表还将输入中的文本放入其中。我需要输出看起来像

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

我不确定如何正确放置追加以创建列表并将文本追加到里面。我可以轻松获取文本值并将其输出到列表中。任何关于追加的帮助都会很棒。

【问题讨论】：

标签： jquery dynamic html-lists append

【解决方案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/

更新：

为您的 cmets ：

这是网址：

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

【讨论】：

我还需要创建一个小 X 按钮来删除列表项，以防有人输入错误。基本上就像 stackoverflow 如何允许您从问题中删除标签一样。如果有人可以发布一些示例代码，将为我节省一些时间。
你我的英雄！感谢您的快速响应和帮助。
如何在为每个列表项添加类时执行此操作？

【解决方案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>");
});

【讨论】：

【解决方案3】：

您正在寻找 jQuery appendTo()

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

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

这可能有用

【讨论】：