4

追加ボタン付きのテキスト入力があるフォームがあります。追加ボタンをクリックすると、入力からテキストが取得され、下の別のdivに配置されます。入力からのテキストも内部に配置する、動的に作成された順序付けされていないリストに含める必要があります。次のような出力が必要です

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

追加を適切に配置してリストを作成し、その中にテキストを追加する方法がわかりません。テキスト値を簡単に取得して、リストに出力することはできません。追加についての助けは素晴らしいでしょう。

4

3 に答える 3

15

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/

アップデート：

あなたのコメントのために：

ここにURLがあります：

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()
});
于 2013-02-13T00:43:44.970 に答える
0

あなたはjQueryを探していますappendTo()

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

デモ: http://jsfiddle.net/u74Ag/

これは役に立つかもしれません

于 2013-02-13T00:39:29.180 に答える
0

このようなもの？

$("#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>");
});
于 2013-02-13T00:38:49.303 に答える