使用 Jquery 克隆现有的 div答案

【问题标题】：clone existing div with Jquery使用 Jquery 克隆现有的 div
【发布时间】：2018-10-06 17:34:39
【问题描述】：

我有一个问题。如何使用 jquery 克隆现有的 div？

<div class="modal-body">
    <div class="row">
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Factura</b>
            <input type="number" class="form-control" id="numero"><br/>
        </div>
        <div class="col-md-2 text-center">
            -o-
        </div>
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Remisi&oacute;n</b>
            <input type="number" class="form-control" id="remision"><br/>
        </div>
        <div class="col-md-12">
            <b>NIT:</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="proveedor">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" id="productos" value="1">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
                <i class="fas fa-user-plus" style="color: white"></i>
            </button>
        </div>
    </div>
    <br/>
    <div id="contenido" class="row text-center">
        <div class="col-md-4">
            <b>Producto</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM productos");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="producto">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['id']; ?>"><?php echo $r['descripcion']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-4">
            <b>Cantidad</b>
            <input type="number" class="form-control" id="cantidad"><br/>
        </div>
        <div class="col-md-4">
            <b>Precio</b>
            <input type="number" class="form-control" id="precio"><br/>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>

当有人按下 class="agregar_producto" 的按钮时，我需要克隆 id="contenido" 的 div。

我该如何解决？ [Example]2

有可能吗？我只需要一个例子来解决我的问题。谢谢你！

编辑：如果克隆此输入，我如何将 ids/class 更改为此输入？

【问题讨论】：

谷歌搜索怎么样？偶然发现了来自官方 jQuery 文档的this...
JQuery clone <select> element的可能重复
如果我使用克隆如何更改 id/class 以创建 dinamyc 输入？
codereview.stackexchange.com/questions/69295/…
@JuanMolina 当您调用$("$elementId").clone() 时，您将获得元素的深层副本，它是一个jQuery 对象。您可能可以在变量中使用它来访问它的属性..

标签： javascript php jquery html

【解决方案1】：

您好，请检查以下代码：

<html>
      <head>
        <title>Sample HTML</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      </head>
      <body bgcolor=white>

         <div id="contenido" class="row text-center">
            <div class="col-md-4">
                <b>Producto</b>
                <select class="form-control" id="producto">
                
                    <option value="product1">product1</option>
                    <option value="product2">product2</option>
                    <option value="product3">product3</option>
                    <option value="product4">product4</option>
                    <option value="product5">product5</option>
                    <option value="product6">product6</option>
                    
                </select><br/>
            </div>
            <div class="col-md-4">
                <b>Cantidad</b>
                <input type="number" class="form-control" id="cantidad"><br/>
            </div>
            <div class="col-md-4">
                <b>Precio</b>
                <input type="number" class="form-control" id="precio"><br/>
            </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn agregar_producto" name="crear">Agregar Producto</button>
        
    </div>

    <script type="text/javascript">
    jQuery(document).ready(function ($) {
      $(".agregar_producto").on('click', function() {
      
        var $contenido  = $("#contenido:last");
        var $clone = $contenido.clone();
        $clone.find('input').val('');
        $contenido.after($clone);
      });
    });
    </script>
      </body>
    </html>

【讨论】：

需要一些规范说明为什么 op 必须尝试您的代码以及您为克服问题所做的更改？

【解决方案2】：

1.Id 需要每个元素都是唯一的，因此将 id="contenido" 转换为 class="contenido"

2.使用.clone()

$('.agregar_producto').on('click', function(){
  var clone = $( ".contenido:first" ).clone();
  $(clone).attr('id','changedId'); //change cloned element id attribute
  $(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
  $(clone).insertAfter( ".contenido:last" );
});

注意：-添加要追加克隆的元素的选择器（类或 id）。

参考：-

.insertAfter()

工作 sn-p：-

$('.agregar_producto').on('click', function(){
  var clone = $( ".contenido:first" ).clone();
  $(clone).attr('id','changedId'); //change cloned element id attribute
  $(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
  $(clone).insertAfter( ".contenido:last" );
});

#changedId{
 background:yellow;
}

#changedId1{
 font-size:20px;
 color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
    <div class="row">
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Factura</b>
            <input type="number" class="form-control" id="numero"><br/>
        </div>
        <div class="col-md-2 text-center">
            -o-
        </div>
        <div class="col-md-5 text-center">
            <b>N&uacute;mero Remisi&oacute;n</b>
            <input type="number" class="form-control" id="remision"><br/>
        </div>
        <div class="col-md-12">
            <b>NIT:</b>
            <?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
            $resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
            <select class="form-control" id="proveedor">
                <?php foreach($resultado as $r): ?>
                <option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
                <?php endforeach; ?>
            </select><br/>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" id="productos" value="1">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
                <i class="fas fa-user-plus" style="color: black">Click me to append Clone</i>
            </button>
        </div>
    </div>
    <br/>
    <div class="contenido" class="row text-center">
        <div class="col-md-4">
            <b>Producto</b>
            <select class="form-control" id="producto">
               
                <option value="1">1</option>
                <option value="1">2</option>
                <option value="1">3</option>
                <option value="1">4</option>
                <option value="1">5</option>
                
            </select><br/>
        </div>
        <div class="col-md-4">
            <b>Cantidad</b>
            <input type="number" class="form-control" id="cantidad"><br/>
        </div>
        <div class="col-md-4">
            <b>Precio</b>
            <input type="number" class="form-control" id="precio"><br/>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>

【讨论】：

【解决方案3】：

$('.agregar_producto').click(function(){
  $( "#contenido" ).clone().appendTo( "body" );
});

您可以更改上述内容以将克隆附加到特定元素下。

【讨论】：

【解决方案4】：

.clone() 方法创建匹配元素集的深层副本。和.appendTo( ) 附加克隆的元素。

$('.agregar_producto').on('click', function(){
  $( "#contenido" ).clone().appendTo( "body" );
});

【讨论】：

【解决方案5】：

您可以轻松地执行以下操作。

<div id="div1">
  <p>
    Content in DIV1
  </p>
</div>
<div id="tgt">

</div>

jQuery sn-p 如下。

$(document).ready(function(){
    var div1 = $("#div1").clone(); //Clone the element. Assigned to the JS variable div1
    div1.attr("id", "div1clone"); //Modify the necessary properties using $(element).attr()
    $("#tgt").append(div1); //Append the content to where ever desired 
});

这只是一个非常生锈的样品。检查this fiddle 以了解此操作。

【讨论】：