如何使用带有jQuery的appendTo输出表单输入值

Question

好吧，开始之前这是个主意。 我正在制作一个提醒应用程序，它只是一个简单的应用程序。 我从输入字段中获取值，并在其旁边创建一个带有输入值的复选框。 现在我正在使用appendTo方法，但它没有打印出值。 如果你们能帮助的话，将非常感谢！

我的HTML

 <form id="form">
   <input class="form-control topSpaceFromRoof" type="text"id="getReminder"/>
   <p class="text-center">
      <input type="submit" value="submit" class="btn btn-default">
   </p>
 </form>

 <!-- here is the div in which i want to append check boxes -->
 <div class="checkbox">

 </div>

我的JAVASCRIPT

 (function(){

    var input = $('#getReminder');
    $this     = $(this);

    $( "form" ).submit(function() {
     if(input.val() == ""){
       input.addClass('warning').attr('placeholder','Please set the reminder').addClass('warning-red');
       return false;
     }
    else
    {
        input.removeClass('warning');
        $('<label>
            <input type="checkbox" id="checkboxSuccess" value="option1">
            '+ input.val() +'
           </label>').appendTo('.checkbox');
        return true;
    }

});

})();

Answer 1

在JavaScript中，字符串中的新行表示新语句的开始。 如果您希望字符串覆盖多行，则需要对回车符进行转义：

 $('<label>\
    <input type="checkbox" id="checkboxSuccess" value="option1">\
    '+ input.val() +'\
    </label>').appendTo('.checkbox');

或者，连接每行：

 $('<label>' +
    '<input type="checkbox" id="checkboxSuccess" value="option1">' +
    input.val() +
    '</label>').appendTo('.checkbox');

Answer 2

else { 
   input.removeClass('warning');
    $('.checkbox').append('<label><input type="checkbox" id="checkboxSuccess" value="option1"> ' + input.val() + '</label>');
    return true;
 }

我不确定.appendTo()是否要在这里使用，我会用$(selector)选择元素，然后使用.append()方法添加下一项。