JavaScript - como agregar un div con input dentro un form ?

Buenas

tengo un archivo php con una consulta en sql y dentro del while con una clase contenedor , dentro de contenedor tiene dos dos div y dentro de estos varios input creando una tabla de elementos

básicamente necesito que luego de que se me cargaran los datos y se crean todas las filas poder agregar o eliminar una clase contenedor con todos sus elementos

dejo parte del codigo que tengo con el php en java no cree nada por que no se por donde empezar (sinceridad XD )

como siempre espero su ayuda y cualquier comentario sobre el código o modificación siempre es bien recibida


while ($row = mysqli_fetch_array($result)) {

<div class="contenedor">

<div class="celda" id="id_celda<?= $cont;?>">

<input style="border-top: none; border-left: none;" type="text" name="ccpp[]" id="id_ccpp<?= $cont;?>"
value="<?= $row['ccpp'];?>" class="class_ccpp" onchange="" />


<select style="border-top: none; border-left: none;" type="text" id="id_riega<?
= $cont;?>" name="opciones2" value="<?= $row['habilitado'];?>" selected="selected" class="class_riega"
onchange="porcentaje()">
<? if ($row['habilitado'] == "dist") { ?>
<option value="dist" selected="selected">dist
<option value="ins si" >ins si

<?}else if ($row['habilitado'] == "ins si") { ?>

<option value="dist">dist
<option value="ins si" selected="selected">ins si


<?}else{?>
<option value="error" selected="selected">error</option>
<option value="dist">dist</option>
<option value="ins si" >ins si</option>
<?}?>
</select>


<input style="border-top: none; border-left: none;" name=""
id="id_porcentaje_ins<?= $cont;?>" value="<?= $row['porcentaje_insp'];?>" class="class_porcentaje_ins"
onchange="porcentaje();" />


<input style="border-top: none; border-left: none;" type="text" name="titular[]" id="id_deuda" value="<?=
$row['deuda_importe'];?>" class="class_deuda" readonly="" onchange="" />


</div>

<div class="celda celda2 " >

<input style="background: #d8d6d6;" type="text" name="" id="turnoinicio_1_<?= $cont;?>" value="" class=""
readonly="" onchange="" />
<input style="background: #d8d6d6;margin-right: 5px; " type="text" name="" id="turnofin_1_<?= $cont;?>"
value="" class="" readonly="" onchange="" />


</div>

</div>


saludos atentamente

buenas buscando encontré la función clonar que hace lo que busco salvando el echo de que lo pone al final

adjunto código me gustaría saber como poner dentro de un div en particular ya que este solo lo pone dentro del body

function clonar(){

var c = document.getElementById("id_contenedor");
var clon = c.cloneNode(true);

document.body.appendChild(clon);
}

Hola,

primero creas el elemento que quieres y luego lo añades después del elemento id que deseas.

Ejemplo:


Añado el "node" que he creado después del elemento con id ".

Tienes un manual con ejemplos aquí https://www.w3schools.com/jsref/met_node_appendchild.asp

Un saludo!