我有一个带有添加按钮的文本输入表单。当您单击添加按钮时,它会从输入中获取文本并将其放在另一个 div 中。我需要它位于动态创建的无序列表中,该列表还将输入中的文本放入其中。我需要输出看起来像
<ul>
<li>text from input</li>
<li>text from input again</li>
</ul>
我不确定如何正确放置附加以创建列表并将文本附加在其中。我可以轻松获取文本值并将其输出到列表中。关于追加的任何帮助都会很棒。
我有一个带有添加按钮的文本输入表单。当您单击添加按钮时,它会从输入中获取文本并将其放在另一个 div 中。我需要它位于动态创建的无序列表中,该列表还将输入中的文本放入其中。我需要输出看起来像
<ul>
<li>text from input</li>
<li>text from input again</li>
</ul>
我不确定如何正确放置附加以创建列表并将文本附加在其中。我可以轻松获取文本值并将其输出到列表中。关于追加的任何帮助都会很棒。
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')
}
});
这是演示:
更新:
为您的意见:
这是网址:
$('#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()
});
像这样的东西?
$("#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>");
});
你正在寻找 jQueryappendTo()
$("button").click(function(){
$("<li>"+$("input").val()+"</li>").appendTo("ul");
});
演示:http: //jsfiddle.net/u74Ag/
这可能有用