Warm tip: This article is reproduced from stackoverflow.com, please click
javascript

Add paragraph with a for loop

发布于 2020-03-27 10:22:25

I want to add a paragraph in each div having the class "text" of my HTML code. The number of div is not known in advance. To do this, I thought to use a for loop but it does not work. Would you have a solution to offer me? Thank you :)

https://jsbin.com/retanibika/1/edit?html,js,output

HTML

<section>
   <!-- Première div. Index [0] -->
  <div class="texte"></div>  
</section>

<section>
   <!-- Deuxième div. Index [1] -->
  <div class="texte"></div>  
</section>

JAVASCRIPT

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();
Questioner
Leakcim
Viewed
17
mahan 2019-07-05 16:20
  • Use this.blocTexte.length instead of this.blocTexte.length - 1 so that the loop reaches total number of texte elements.

  • Create as many paragraph elements as .texte elements. You can do so by creating p inside the loop. Doing so, remove this.p = document.createElement('p');

    class AddTexte {
      constructor() {
        this.blocTexte = document.querySelectorAll('.texte');
      }
      texte() {
        for (let i = 0; i < this.blocTexte.length; i++) {
          const p = document.createElement('p');
          p.innerHTML = "Bla bla bla"
          this.blocTexte[i].appendChild(p);
        }
      }
    }
    
    let newAddTexte = new AddTexte();
    newAddTexte.texte();
    <section>
      <!-- Première div. Index [0] -->
      <div class="texte"></div>
    </section>
    
    <section>
      <!-- Deuxième div. Index [1] -->
      <div class="texte"></div>
    </section>
    
    <section>
      <!-- Deuxième div. Index [1] -->
      <div class="texte"></div>
    </section>
    
    <section>
      <!-- Deuxième div. Index [1] -->
      <div class="texte"></div>
    </section>
    
    <section>
      <!-- Deuxième div. Index [1] -->
      <div class="texte"></div>
    </section>

I recommend you to go for for ...of loop. It is much readable and easier to maintain.

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, Array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. - MDN

class AddTexte {
  constructor() {
    this.blocTexte = document.querySelectorAll('.texte');
  }
  texte() {
    for (let texte of this.blocTexte) {
      const p = document.createElement('p');
      p.innerHTML = "Bla bla bla"
      texte.appendChild(p);
    }
  }
}

let newAddTexte = new AddTexte();
newAddTexte.texte();
<section>
  <!-- Première div. Index [0] -->
  <div class="texte"></div>
</section>

<section>
  <!-- Deuxième div. Index [1] -->
  <div class="texte"></div>
</section>

<section>
  <!-- Deuxième div. Index [1] -->
  <div class="texte"></div>
</section>

<section>
  <!-- Deuxième div. Index [1] -->
  <div class="texte"></div>
</section>

<section>
  <!-- Deuxième div. Index [1] -->
  <div class="texte"></div>
</section>