javascript - 使用 for 循环添加段落

Question

我想在每个具有我的 HTML 代码“文本”类的 div 中添加一个段落。事先不知道 div 的数量。为此，我想使用 for 循环，但它不起作用。你能给我一个解决方案吗？谢谢:)

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();

Answer 1

• 使用 this.blocTexte.length 而不是 this.blocTexte.length - 1 以便循环达到 texte 的总数> 元素。

• 创建与 .texte 元素一样多的段落元素。您可以通过在循环内创建 p 来实现。这样做，删除 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>

---

我建议你使用 for ...of 循环。它具有更高的可读性和更易于维护。

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>