我正在尝试在单击按钮时将输入附加到父 div，但它不起作用答案

【问题标题】：I am trying to append input to parent div on button click but its not working我正在尝试在单击按钮时将输入附加到父 div，但它不起作用
【发布时间】：2016-12-16 09:40:45
【问题描述】：

我是 jquery 的新手，我试图在按钮单击时将输入字段动态附加到父 div，但它不起作用。我正在尝试在带有 id join 的父 div 中添加包含输入的 div。

<script type='text/javascript'>
       $('#add1').click(function(){
           $('#join').append(" <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company name</label>
             <span class="help-block"></span>
          </div>")
       });
    </script>


    <div class="row" id="join">
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company name</label>
             <span class="help-block"></span>
          </div>
       </div>
       <!--/span-->
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company Location</label>
             <span class="help-block"></span>
          </div>
       </div>
       <div class="btn-toolbar col-md-2" style="padding-top: 20px;">
          <div class="btn-group btn-group-sm btn-group-circle">
             <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button>
             <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button>
          </div>
       </div>
       <!--/span-->
    </div>

【问题讨论】：

文件准备好了吗？

标签： jquery html

【解决方案1】：

你有一个双引号 " 问题尝试使用单引号而不是 ' 像：

$('#join').append('<div class="col-md-5">
      <div class="form-group form-md-line-input form-md-floating-label"> \
         <input type="text" class="form-control" id="form_control_1"> \
         <label for="form_control_1">Company name</label>\
         <span class="help-block"></span>\
      </div>');

希望这会有所帮助。

$('#add1').click(function(){
  $('#join').append('<div class="col-md-5"><div class="form-group form-md-line-input form-md-floating-label"><input type="text" class="form-control" id="form_control_1"><label for="form_control_1">Company name</label><span class="help-block"></span></div>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="row" id="join">
  <div class="col-md-5">
    <div class="form-group form-md-line-input form-md-floating-label">
      <input type="text" class="form-control" id="form_control_1">
      <label for="form_control_1">Company name</label>
      <span class="help-block"></span>
    </div>
  </div>
  <!--/span-->
  <div class="col-md-5">
    <div class="form-group form-md-line-input form-md-floating-label">
      <input type="text" class="form-control" id="form_control_1">
      <label for="form_control_1">Company Location</label>
      <span class="help-block"></span>
    </div>
  </div>
  <div class="btn-toolbar col-md-2" style="padding-top: 20px;">
    <div class="btn-group btn-group-sm btn-group-circle">
      <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button>
      <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button>
    </div>
  </div>
  <!--/span-->
</div>

【讨论】：

【解决方案2】：

对不起我的英语，在 append 后使用单引号，检查工作的 sn-p

$('#add1').click(function(){
    $('#join').append('<div class="col-md-5"><div class="form-group form-md-line-input form-md-floating-label"><input type="text" class="form-control" id="form_control_1"><label for="form_control_1">Company name</label><span class="help-block"></span></div>')
});

<div class="row" id="join">
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company name</label>
             <span class="help-block"></span>
          </div>
       </div>
       <!--/span-->
       <div class="col-md-5">
          <div class="form-group form-md-line-input form-md-floating-label">
             <input type="text" class="form-control" id="form_control_1">
             <label for="form_control_1">Company Location</label>
             <span class="help-block"></span>
          </div>
       </div>
       <div class="btn-toolbar col-md-2" style="padding-top: 20px;">
          <div class="btn-group btn-group-sm btn-group-circle">
             <button type="button" id="add1" class="btn red"><i class="fa fa-plus"></i></button>
             <button type="button" id="remove1" class="btn blue"><i class="fa fa-times"></i></button>
          </div>
       </div>
       <!--/span-->
    </div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

【讨论】：