jquery - 将输入附加到表单中

Question

我正在尝试创建一个简单的待办事项列表。我想要完成的一件事是在单击后使用 jQuery 将一些输入附加到表单中。不幸的是，这并没有发生......谁能指出我正确的方向并帮助我将一些输入附加到表单中？

在 CSS 面板中查看

我正在尝试的代码：

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

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

});

谢谢

Answer 1

您可以使用：

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

下面是一个使用所描述行为的 JSFiddle。

Answer 2

你input不是一个id而是一个class。所以它应该被称为.input

只需更改#input为.input

像这样，

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

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

Answer 3

如果#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 的问题，而不是保存或除此之外的其他内容。