时间戳

首页 > 解决方案 > 使用 for 循环添加段落

javascript - 使用 for 循环添加段落

问题描述

我想在每个 div 中添加一个段落，其中包含我的 HTML 代码的“文本”类。事先不知道div的数量。为此，我想使用 for 循环，但它不起作用。你有解决方案可以提供给我吗？谢谢 ：）

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

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

标签： javascript

解决方案

您最大的问题是您使用的是相同的段落标签，因此它将被移动。我还将元素转换为数组，以便更轻松地迭代它们。

class AddTexte {

    constructor(){
        this.blocTexte = [].slice.call(document.getElementsByClassName('texte'));
      }

      texte(){
        this.blocTexte.forEach(function (div) {
          let p = document.createElement('p');
          div.appendChild(p);
          p.innerHTML = "Bla bla bla";
        });
      }
    }

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

推荐阅读