如何将HTML块附加到同一<form>标签中的现有HTML块？</form>

Question

我关注HTML块：

<form action="add_rebate_by_quat_volume.php" role="form" method="post">
              <div class="row">
                <input type="hidden" class="form-control" name="op" id="op" value="preview">
                <input type="hidden" class="form-control" name="id" id="id" value="">
                <input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
                <div class="col-xs-2">
                </div>

                <div style="float: clear;"></div>
                <div style="margin-left: 12px" class="col-xs-4">
                  <div class="form-group">
                    <label for="company_name" class="col-lg-4">Manufacturer<span style="color:#FF0000">*</span></label>
                    <div class="col-lg-7">
                      <select id="company_id" name="company_id" class="form-control" onchange="GetAllProductByManufacturerID(this.value)">
                        <option value=""  selected='selected'>Select Manufacturer</option>

                          <option value="33" >Eywa Solutions</option>

                          <option value="37" >Amazon</option>

                          <option value="40" >Test</option>

                          <option value="42" >RK</option>

                          <option value="46" >Santa Margherita</option>
                                              </select>
                    </div>
                  </div>
                </div>
                <div style="margin-left: -61px" class="col-xs-4">
                  <div class="form-group">
                    <div class="col-lg-7">                      
                      <button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                    </div>
                  </div>
                </div>
              </div>
              </br> 
              <div class="col-lg-2"></div>                  
              <div class="col-md-8">   
                <div style="overflow:auto" class="well">                 
                  </br>
                  <div class="table-responsive">
                    <table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
                      <thead>
                        <tr  id="Row1">
                          <th style="vertical-align:middle">Products</th>
                          <th style="vertical-align:middle">Pack Of</th>
                          <th style="vertical-align:middle">Quantity</th>
                          <th style="vertical-align:middle">Volume</th>
                          <th style="vertical-align:middle">Unit</th>
                          <th style="vertical-align:middle">Rebate Amount</th>
                        </tr>
                      </thead>
                      <tbody class="apnd-test">
                                                <tr id="reb1">
                          <td>
                            <div class="btn-group">
                              <select name="product_id" class="form-control prod_list">
                                <option value=""  selected='selected'>Select Product</option>
                                                              </select>
                            </div>
                          </td>
                          <td><input type="text" name="pack" id="pack" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="quantity" id="quantity" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="volume" id="volume" value="" class="form-control" size="8"/></td>
                          <td>
                            <div class="btn-group">
                              <select id="units" name="units" class="form-control">
                                <option value=""  selected='selected'>Select Unit</option>

                                <option value="5" >Microsecond</option>

                                <option value="7" >oz</option>

                                <option value="9" >ml</option>

                                <option value="10" >L</option>

                                <option value="12" >gms</option>
                                                               </select>
                            </div>
                          </td>
                          <td><input type="text" name="amount" id="amount" value="" class="form-control" size="9"/></td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr id="reb2">
                          <td><button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tfoot>

                    </table>                  
                  </div>
                </div> <!-- /span8 -->              
                <div class="row">
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
                    <div class="col-lg-6">
                      <input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date" value="">
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
                    <div class="col-lg-6">
                      <input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date" value="">
                    </div>
                  </div> 
                </div>
                </br>
                <div class="row">
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-5">Applicable States</label>
                    <div class="col-lg-7">
                      <select id="example28" multiple="multiple" name="applicable_states[]">
                                                                          <option value="1">Alabama</option>
                                                  <option value="2">Alaska</option>
                                                  <option value="3">Arizona</option>
                                                  <option value="4">Arkansas</option>
                                                  <option value="5">California</option>
                                                  <option value="6">Colorado</option>
                                                  <option value="7">Connecticut</option>
                                                  <option value="8">Delaware</option>
                                                  <option value="9">Florida</option>
                                                  <option value="10">Georgia</option>

                      </select>                          
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-6">Rebate Total Count</label>
                    <div class="col-lg-6">
                      <input type="text" class="form-control" name="rebate_total_count" id="rebate_total_count" value="">
                    </div>
                  </div> 
                </div>
                </br>
                <div class="row">
                  <div class="col-xs-6">                    
                  </div>
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-6"></label>
                    <div class="col-lg-6">
                      <button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                    </div>
                  </div> 
                </div>
                <div class="row">
                  <div  class="col-xs-5"></div>
                  <div style="margin-left: -9px"  class="col-xs-5">
                    <button type="submit" class="btn btn-primary">Preview</button>
                    <button type="button" class="btn btn-default">Go Back</button>                        
                  </div>
                </div>
              </div>
            </form>

现在点击任何“添加新回扣”按钮后，下一个块应该附加到第一个块：

<div style="float: clear;"></div>
                <div style="margin-left: 12px" class="col-xs-4">
                  <div class="form-group">
                    <label for="company_name" class="col-lg-4">Manufacturer<span style="color:#FF0000">*</span></label>
                    <div class="col-lg-7">
                      <select id="company_id" name="company_id" class="form-control" onchange="GetAllProductByManufacturerID(this.value)">
                        <option value=""  selected='selected'>Select Manufacturer</option>

                          <option value="33" >Eywa Solutions</option>

                          <option value="37" >Amazon</option>

                          <option value="40" >Test</option>

                          <option value="42" >RK</option>

                          <option value="46" >Santa Margherita</option>
                                              </select>
                    </div>
                  </div>
                </div>
                <div style="margin-left: -61px" class="col-xs-4">
                  <div class="form-group">
                    <div class="col-lg-7">                      
                      <button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                    </div>
                  </div>
                </div>
              </div>
              </br> 
              <div class="col-lg-2"></div>                  
              <div class="col-md-8">   
                <div style="overflow:auto" class="well">                 
                  </br>
                  <div class="table-responsive">
                    <table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
                      <thead>
                        <tr  id="Row1">
                          <th style="vertical-align:middle">Products</th>
                          <th style="vertical-align:middle">Pack Of</th>
                          <th style="vertical-align:middle">Quantity</th>
                          <th style="vertical-align:middle">Volume</th>
                          <th style="vertical-align:middle">Unit</th>
                          <th style="vertical-align:middle">Rebate Amount</th>
                        </tr>
                      </thead>
                      <tbody class="apnd-test">
                                                <tr id="reb1">
                          <td>
                            <div class="btn-group">
                              <select name="product_id" class="form-control prod_list">
                                <option value=""  selected='selected'>Select Product</option>
                                                              </select>
                            </div>
                          </td>
                          <td><input type="text" name="pack" id="pack" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="quantity" id="quantity" value="" class="form-control" size="8"/></td>
                          <td><input type="text" name="volume" id="volume" value="" class="form-control" size="8"/></td>
                          <td>
                            <div class="btn-group">
                              <select id="units" name="units" class="form-control">
                                <option value=""  selected='selected'>Select Unit</option>

                                <option value="5" >Microsecond</option>

                                <option value="7" >oz</option>

                                <option value="9" >ml</option>

                                <option value="10" >L</option>

                                <option value="12" >gms</option>
                                                               </select>
                            </div>
                          </td>
                          <td><input type="text" name="amount" id="amount" value="" class="form-control" size="9"/></td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr id="reb2">
                          <td><button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                        </tr>
                      </tfoot>

                    </table>                  
                  </div>
                </div> <!-- /span8 -->              
                <div class="row">
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
                    <div class="col-lg-6">
                      <input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date" value="">
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
                    <div class="col-lg-6">
                      <input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date" value="">
                    </div>
                  </div> 
                </div>
                </br>
                <div class="row">
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-5">Applicable States</label>
                    <div class="col-lg-7">
                      <select id="example28" multiple="multiple" name="applicable_states[]">
                                                                          <option value="1">Alabama</option>
                                                  <option value="2">Alaska</option>
                                                  <option value="3">Arizona</option>
                                                  <option value="4">Arkansas</option>
                                                  <option value="5">California</option>
                                                  <option value="6">Colorado</option>
                                                  <option value="7">Connecticut</option>
                                                  <option value="8">Delaware</option>
                                                  <option value="9">Florida</option>
                                                  <option value="10">Georgia</option>


                      </select>                          
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-6">Rebate Total Count</label>
                    <div class="col-lg-6">
                      <input type="text" class="form-control" name="rebate_total_count" id="rebate_total_count" value="">
                    </div>
                  </div> 
                </div>
                </br>
                <div class="row">
                  <div class="col-xs-6">                    
                  </div>
                  <div class="col-xs-6">
                    <label for="name" class="col-lg-6"></label>
                    <div class="col-lg-6">
                      <button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                    </div>
                  </div> 
                </div>

如何使用jQuery实现这一目标。如果用户希望，每个新添加的块上还应该有删除按钮以删除块。以下是我原始HTML块的jsFiddle链接。

Jsfiddle

Answer 1

非常简单

您可以使用Appendto方法

为每个div提供类并使用

  $( ".classA" ).appendTo( ".classB" );

并且要再次删除Html，您可以使用

   $(".classB").remove()

如果您想要复制元素，那么

   $( ".classA" ).clone().appendTo( ".classB" );

参考：https://api.jquery.com/appendTo/

Answer 2

创建克隆标记。其中包含所有内容的空白。然后克隆并附加。

<div id="clonethis" style="float: clear;"></div>
            <div style="margin-left: 12px" class="col-xs-4">
              <div class="form-group">
                <label for="company_name" class="col-lg-4">Manufacturer<span style="color:#FF0000">*</span></label>
                <div class="col-lg-7">
                  <select id="company_id" name="company_id" class="form-control" onchange="GetAllProductByManufacturerID(this.value)">
                    <option value=""  selected='selected'>Select Manufacturer</option>

                      <option value="33" >Eywa Solutions</option>

                      <option value="37" >Amazon</option>

                      <option value="40" >Test</option>

                      <option value="42" >RK</option>

                      <option value="46" >Santa Margherita</option>
                                          </select>
                </div>
              </div>
            </div>
            <div style="margin-left: -61px" class="col-xs-4">
              <div class="form-group">
                <div class="col-lg-7">                      
                  <button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                </div>
              </div>
            </div>
          </div>
          </br> 
          <div class="col-lg-2"></div>                  
          <div class="col-md-8">   
            <div style="overflow:auto" class="well">                 
              </br>
              <div class="table-responsive">
                <table   id="blacklistgrid"  class="table table-bordered table-hover table-striped">
                  <thead>
                    <tr  id="Row1">
                      <th style="vertical-align:middle">Products</th>
                      <th style="vertical-align:middle">Pack Of</th>
                      <th style="vertical-align:middle">Quantity</th>
                      <th style="vertical-align:middle">Volume</th>
                      <th style="vertical-align:middle">Unit</th>
                      <th style="vertical-align:middle">Rebate Amount</th>
                    </tr>
                  </thead>
                  <tbody class="apnd-test">
                                            <tr id="reb1">
                      <td>
                        <div class="btn-group">
                          <select name="product_id" class="form-control prod_list">
                            <option value=""  selected='selected'>Select Product</option>
                                                          </select>
                        </div>
                      </td>
                      <td><input type="text" name="pack" id="pack" value="" class="form-control" size="8"/></td>
                      <td><input type="text" name="quantity" id="quantity" value="" class="form-control" size="8"/></td>
                      <td><input type="text" name="volume" id="volume" value="" class="form-control" size="8"/></td>
                      <td>
                        <div class="btn-group">
                          <select id="units" name="units" class="form-control">
                            <option value=""  selected='selected'>Select Unit</option>

                            <option value="5" >Microsecond</option>

                            <option value="7" >oz</option>

                            <option value="9" >ml</option>

                            <option value="10" >L</option>

                            <option value="12" >gms</option>
                                                           </select>
                        </div>
                      </td>
                      <td><input type="text" name="amount" id="amount" value="" class="form-control" size="9"/></td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr id="reb2">
                      <td><button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                      <td></td>
                    </tr>
                  </tfoot>

                </table>                  
              </div>
            </div> <!-- /span8 -->              
            <div class="row">
              <div class="col-xs-6">
                <label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
                <div class="col-lg-6">
                  <input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date" value="">
                </div>
              </div>
              <div class="col-xs-6">
                <label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
                <div class="col-lg-6">
                  <input class="form-control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date" value="">
                </div>
              </div> 
            </div>
            </br>
            <div class="row">
              <div class="col-xs-6">
                <label for="name" class="col-lg-5">Applicable States</label>
                <div class="col-lg-7">
                  <select id="example28" multiple="multiple" name="applicable_states[]">
                                                                      <option value="1">Alabama</option>
                                              <option value="2">Alaska</option>
                                              <option value="3">Arizona</option>
                                              <option value="4">Arkansas</option>
                                              <option value="5">California</option>
                                              <option value="6">Colorado</option>
                                              <option value="7">Connecticut</option>
                                              <option value="8">Delaware</option>
                                              <option value="9">Florida</option>
                                              <option value="10">Georgia</option>


                  </select>                          
                </div>
              </div>
              <div class="col-xs-6">
                <label for="name" class="col-lg-6">Rebate Total Count</label>
                <div class="col-lg-6">
                  <input type="text" class="form-control" name="rebate_total_count" id="rebate_total_count" value="">
                </div>
              </div> 
            </div>
            </br>
            <div class="row">
              <div class="col-xs-6">                    
              </div>
              <div class="col-xs-6">
                <label for="name" class="col-lg-6"></label>
                <div class="col-lg-6">
                  <button style="float:right" class="btnAdd" type="button" class="btn btn-default" onclick="add_rebate(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>
                </div>
              </div> 
            </div>

然后：

$('#clonethis').clone(true).removeAttr('id').appendTo('form');

Answer 3

您需要将字段分组为具有类名“copyMe”的元素。像这样绑定你的点击事件：

$('#addRebate').on('click', function (){
    $('.copyMe:eq(0)').clone().appendTo('form');
});

如果删除按钮位于克隆组内（使用'removeCopy'类），那么绑定也很容易：

$(document).on('click','.removeCopy', function (){
    $(this).closest('.copyMe').remove();
});

如果克隆组中有任何ID或名称，最好增加它们或以其他方式更改它们。

Answer 4

将Jquery称为像这样简单的任务是有点过分，本机Javascript应该可以正常工作来编写第二个块。请记住，在调用Jquery之后，您仍然可以使用本机JS函数。简单的方法是简单地使用普通的Javascript的innerHTML和+ =符号将它附加到当前代码。

<div id="wrapper">
put first block here...
</div>
<script LANGUAGE="Javascript">
// put the id of the element to add the second block to and what to add to it below
document.getElementById("wrapper").innerHTML += "second block without any newlines here";
</script>

但innerHTML不是规范的官方部分，可以随时从浏览器中删除。 另一个更简单的选择可能是使用第二个块创建一个div，但最初只能通过CSS使其不可见：

<div id="secondblock" style="display:none;">
...
</div>
<script LANGUAGE="Javascript">
document.getElementById("secondblock").style.display="inline";
</script>

然而，官方的方法是使用appendChild / insertBefore。这是一个复杂的方法，但如果你真的必须按照规范来做，这里有一个解释它们的链接。 http://www.javascriptkit.com/javatutors/dom2.shtml