clone existing div with Jquery
Question
i have an issue. How can i clone an existing div with jquery?
<div class="modal-body">
<div class="row">
<div class="col-md-5 text-center">
<b>Nú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úmero Remisió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>
I need to clone the div with id="contenido" when someone press the button with class="agregar_producto".
How can i solve it? [Example] 2
Is it possible? i need only an example to solve my problem. Thx you! <3
EDIT: If a clone this inputs how can i change ids/class to this inputs?
5 answers
solution1
4 2018-04-26 06:32:59
Hi Please check below code:
<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>
solution2
2 ACCPTED 2018-04-26 06:11:51
1. Id need to be unique per element so convert id="contenido" to class="contenido"
2.Use .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" );
});
Note:- add selector(class or id) of the element after which you want to append the clone.
Reference:-
Working snippet:-
$('.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ú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úmero Remisió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>
solution3
0 2018-04-26 06:07:53
$('.agregar_producto').click(function(){
$( "#contenido" ).clone().appendTo( "body" );
});
you can change the above to append the clone under specific elements.
solution4
0 2018-04-26 06:07:58
.clone() method create a deep copy of the set of matched elements. And .appendTo( ) to append the cloned element.
$('.agregar_producto').on('click', function(){ $( "#contenido" ).clone().appendTo( "body" ); });
solution5
0 2018-04-26 06:34:43
You could easily do the following.
<div id="div1">
<p>
Content in DIV1
</p>
</div>
<div id="tgt">
</div>
jQuery snippet would be as follows.
$(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 is just a very rusty sample. Check this fiddle out to see this in action.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
clone div using jquery
How clone div jquery html
jquery clone div for the first time
Clone HTML DIV with jQuery on select
(jQuery) Clone variable content into a Div
clone div with jquery and show as code
How to clone a div ontop of another div jquery
Clone a div in another div using jQuery
jquery clone input file was not adding file when clone div
Clone div with jQuery and increase child classes
Related Tags