0

Tenho uma div HTML que exibe totais de um cálculo, e preciso que cada vez que seja gerada uma nova (no clique do botão Gerar) uma nova div em branco seja criada para receber os valores, empilhando as já geradas uma embaixo da outra.

Código HTML

BOTAO

<input type="button" value="Gerar Lote" />

HTML

<div class="l1">
    <h4>Resumo</h4>
</div>

<div class="l25">
    <label>Débitos</label>
    <input value="0.00" />
</div>

<div class="l25">
    <label>Créditos</label>
    <input value="0.00" />
</div>
1
  • Vc quer gerar só uma div em branco cada vez que clicar no botão?
    – Sam
    Commented 9/04/2018 às 23:35

1 Resposta 1

2

Para criar copias dos elementos que já possui pode utilizar a função cloneNode. Tendo as cópias em mão precisa apenas de as colocar no local certo, que seria no fim de todas as outras que já tem. Consegue fazer isso utilizando a função insertBefore, especificando o elemento de referência como o pai, e indicando null como nó de referência.

Exemplo:

const resumo = document.querySelector(".l1");
const [debitos, creditos] = [...document.querySelectorAll(".l25")];

//definir o código para o evento de click no botão gerar
document.getElementById("gerar").addEventListener("click", () => {

  //clonar os 3 divs
  const novoResumo = resumo.cloneNode(true); //true indica cópia profunda
  const novoDebito = debitos.cloneNode(true);
  const novoCredito = creditos.cloneNode(true);
  
  //inserir no fim por ordem cada um dos divs clonados
  resumo.parentNode.insertBefore(novoResumo, null);
  resumo.parentNode.insertBefore(novoDebito, null);
  resumo.parentNode.insertBefore(novoCredito, null);
});
<!-- adicionei o id gerar para ficar mais simples -->
<input id="gerar" type="button" value="Gerar Lote" />

<div class="l1">
    <h4>Resumo</h4>
</div>

<div class="l25">
    <label>Débitos</label>
    <input value="0.00" />
</div>

<div class="l25">
    <label>Créditos</label>
    <input value="0.00" />
</div>

Funcionalidades utilizadas que pode querer aprofundar:

1
  • Obrigado Isac, funcionou perfeitamente. Commented 10/04/2018 às 11:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .