如何将 HTML 块附加到同一 <form> 标记内的现有 HTML 块？

【问题标题】：How to append a HTML block to the existing HTML block within same <form> tag?如何将 HTML 块附加到同一 <form> 标记内的现有 HTML 块？
【发布时间】：2014-06-18 01:05:11
【问题描述】：

我有以下 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

【问题讨论】：

  • 在寻求帮助之前，请至少尝试解决问题
  • @arjan：我已经添加了 jsFiddle 链接。

标签： javascript jquery html jquery-append


【解决方案1】：

很简单

你可以使用 Appendto 方法

给你的每个 div 上课并使用

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

如果要再次删除 Html，您可以使用

   $(".classB").remove()

如果你想复制元素，那么

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

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

【讨论】：

    【解决方案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');

    【讨论】：

    • 您能否修改您的答案，使其完全符合我的需求？
    • 只有一个问题 - 你也在克隆 id。您需要考虑这些，以免它们在文档中重复。
    • 那么 OP 应该注意不要在内部的东西中包含 ID，只包含类。
    【解决方案3】：

    您将希望将您的字段分组到一个类名为“copyMe”的元素中。像这样绑定你的点击事件：

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

    如果删除按钮在克隆组内（具有“removeCopy”类），那么绑定到它也很容易：

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

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

    【讨论】：

      【解决方案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

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2012-06-01
        • 1970-01-01
        • 2013-11-09
        • 1970-01-01
        • 1970-01-01
        • 2011-11-08
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode