1
votes

Comment répliquer des éléments HTML avec Loop en javascript

J'essaie de répliquer des éléments html avec une boucle javascript for, la boucle fonctionne bien mais ne crée pas de nouveaux éléments en html.

Quand j'imprime le père dans la console, suite avec 1 élément seulement.

<div id="father">
  <div id="child" class="row mt-5">
    <div class="col-sm-8">
      <h2 class="news" id="">News</h2>
    </div>
  </div>
</div>

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
  father.appendChild(child)
}

Je veux imprimer l'enfant div 5 fois dans le navigateur

javascript html css function

2 commentaires

Copie possible de Comment insérer deux fois le même élément html?

(Pour info, quand quelqu'un formate votre code et crée un extrait de code, veuillez ne pas le saboter à nouveau.)

3 Réponses :

3
votes

Essayez d'utiliser cloneNode :

<div id="father">
    <div id="child" class="row mt-5">
        <div class="col-sm-8">
            <h2 class="news" id="">News</h2>
        </div>
    </div>
</div>

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
    let childCopy = child.cloneNode(true);
    father.appendChild(childCopy);
}

0 commentaires

3
votes

Utilisez .cloneNode

<div id="father">
  <div id="child" class="row mt-5">
    <div class="col-sm-8">
      <h2 class="news" id="">News</h2>
    </div>
  </div>
</div>

var child = document.getElementById('child');
var father = document.getElementById('father');

for (let i = 0; i < 4; i++) {
  father.appendChild(child.cloneNode(true))
}

0 commentaires

1
votes

Vous pouvez également utiliser la balise template pour le clonage, la balise template est un mécanisme permettant de contenir du contenu côté client qui ne doit pas être rendu lorsqu'une page est chargée mais peut ensuite être instancié pendant l'exécution en utilisant JavaScript.

  <template>
  
    <div class="row mt-5">
        <div class="col-sm-8">
            <h2 class="news" id="">News</h2>
        </div>
    </div>

  </template>
  
  <div id="father">

var father = document.getElementById('father');
var temp = document.getElementsByTagName("template")[0];
  
for (let i = 0; i < 4; i++) {
   father.appendChild(temp.content.cloneNode(true))
}

0 commentaires