Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

132
Visualizações
Append div multiple times using JavaScript on DOM Loaded

I want to append the HTML child_element div multiple times as defined on variables inside the parent_element using Javascript on DOM Load.

Desire Output:

<div class="parent_element">
   <div class = "child_element">
   <div class = "child_element">
   <div class = "child_element">
   <div class = "child_element">
   <div class = "child_element">
</div>
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

You can create a child node object and append it to the parent node in loop. Since you have multiple child nodes to be appended you can use DocumentFragment

const parentNode = document.createElement('div');
parentNode.classList.add('parent_element');
const childNode = document.createElement('div');
childNode.classList.add('child_element');
const fragment = new DocumentFragment();

for(let i=0; i<[*no_of_times_you_want_child_node*]; i++) {
    fragment.appendChild(childNode.cloneNode(true));
}

// finally append dom fragment to parent
parentNode.appendChild(fragment);
about 4 years ago · Juan Pablo Isaza Relatório

0

Assuming that you want the number of children to be defined by an attribute "variables inside the parent_element"

<div class="parent" children="5"></div>
<script>
const parentEl = document.querySelector(".parent");
const numOfChildren = +parentEl.getAttribute("children");
const fragment = new DocumentFragment();
for (let i=0; i<numOfChildren; i++) {
    const childEl = document.createElement("div");
    childEl.classList.add("child");
    fragment.appendChild(childEl);
}
parentEl.append(fragment);
</script>

The basic process is:

  1. Get a reference to the parent element using the class selector
  2. Retrieve the number of children you want from the attribute named children. This is a string value so the + will convert it to a number
  3. Loop through the creation of a new element on the DOM adding the desired class name before appending the child.

Edit: As per pilchard's suggestion I've merged in DocumentFragment from abhishek khandait's answer.

about 4 years ago · Juan Pablo Isaza Relatório

0

You can dynamically add a new div element using jquery.

   <script> 
        function addNewDivElement() {
            $("#parent_element").append('<div class = "child_element">')
        }
    </script> 

the function addNewDivElement can be called on click of a button. something like below:

  <button onclick="addNewDivElement()"> 
        Add
  </button> 

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda