jquery - 入力をフォームに追加する

Question

シンプルなTo Doリストを作ろうとしています。私が達成したいことの 1 つは、jQuery を使用してクリックした後にいくつかの入力をフォームに追加することです。残念ながら、これは起こっていません...誰が私を正しい方向に向け、フォームにいくつかの入力を追加するのを手伝ってくれますか?

CSS デッキで表示

私が試しているコード:

$(document).ready(function(){
var todo_list = $('#todo_list');

$('#add').click(function(){
    $('#input').appendTo(todo_list);
});

});

ありがとう

Answer 1

Yourinputはidではなく、classです。SOとして呼び出す必要があります.input

に変更#inputするだけ.input

このような、

 $(document).ready(function(){
 var todo_list = $('#todo_list');

  $('#add').click(function(){
  $('.input').appendTo(todo_list);
 });

Answer 2

#input が既存のタグでない場合、機能しません。appendTo メソッドは、要素を次々と追加するために使用されます。ID セレクター #input を使用していますが、定義されていないようです。HTML を変更して、<input> に #input ID を追加します。

これを行う別の方法は、次のようなものを使用することです。

$(document).ready(function(){
  var todo_list = $('#todo_list');
  var input = $('<input type="text" name="whatever" id="whatever" class="someclass">');

  $('#add').click(function(){
    $(input).appendTo(todo_list);
  });
});

このコードは、新しい <input> を #todo_list に追加する問題のみを解決し、保存やその他の問題を解決しないことに注意してください。

Answer 3

以下を使用できます。

$('#add').click(function(){
  $('#todo_list').append('<input type="text" />');
});

以下は、説明されている動作で動作する JSFiddleに従います。