[Résolu] Ajouter élément avec une boucle

Bonjour,

Je me permets de solliciter votre aide car je rencontre une difficulté.
J'aimerais ajouter un paragraphe dans toutes les div ayant la classe "texte".

<section>
  <div class="texte"></div>  
</section>
<section>
  <div class="texte"></div>  
</section>

Pour obtenir ce résultat, je pensais qu'une boucle suffirait mais ce n'est pas le cas.
En effet, seul un paragraphe est injecté dans le HTML. La deuxième div "texte" reste vide.

class AddTexte {
  constructor(){
    this.blocTexte = document.querySelectorAll('.texte');
    this.p = document.createElement('p');
  }
  
  texte(){
    for(let i = 0; i < this.blocTexte.length -1; i++){
      this.blocTexte[i].appendChild(this.p);
      this.p.innerHTML = "Bla bla bla"
    }
  }
}

let newAddTexte = new AddTexte();
newAddTexte.texte();

querySelectorAll renvoie la liste des div ayant la classe "texte". Je pensais qu'en mettant l'index [ i ] de la boucle, les paragraphes seraient ajoutés.

Le JS Bin est ici

Auriez-vous une piste à me donner ?

Merci
Modifié par MickFR (03 Jul 2019 - 16:04)

Salut,

Je vois 2 choses.

La première c'est sur la boucle :

for(let i = 0; i < this.blocTexte.length -1; i++){

si this.blocTexte.length fait 2, ta condition sera de i=0 à i < 1 donc seulement i=0.

La seconde c'est la création du p. Je ne suis pas hyper calé en classe ici il me semble que tu ne crée qu'un seul élément p, il ne faudrait pas en créer un a chaque itération de la boucle pour le coller dans le dom ?

Salut,

_laurent a écrit :

La première c'est sur la boucle :

for(let i = 0; i < this.blocTexte.length -1; i++){

si this.blocTexte.length fait 2, ta condition sera de i=0 à i &lt; 1 donc seulement i=0.

En effet, merci

_laurent a écrit :

La seconde c'est la création du p. Je ne suis pas hyper calé en classe ici il me semble que tu ne crée qu'un seul élément p, il ne faudrait pas en créer un a chaque itération de la boucle pour le coller dans le dom ?

La boucle suivante fonctionne :

for (let i = 0; i < this.blocTexte.length; i++) {
      const p = document.createElement('p');
      p.innerHTML = "Bla bla bla"
      this.blocTexte[i].appendChild(p);
    }

Modifié par MickFR (05 Jul 2019 - 09:32)