Question

我想在每个div中添加一个段落，该段落具有我的HTML代码的“文本”类。 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

您应该为要添加到DOM的每个段落创建一个新元素。
您的代码中出现了 off-by-one 错误。您不应从节点列表的长度中减去1。（除非您不希望最后一个div包含课程段落）

我在下面有一个工作示例：

const texts = document.querySelectorAll('.text');

for (let div of texts) {
  const p = document.createElement('p');
  p.innerText = "Bla bla bla";
  div.appendChild(p);
}

<div>
  <div class="text"></div>
  <div class="text"></div>
  <div>no text</div>
  <div class="text"></div>
</div>

Answer 2

最大的问题是您使用的是相同的段落标签，因此它将被移动。我还将元素转换为数组，以使其更易于遍历。

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

Answer 3

使用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循环。它可读性强，易于维护。

for ... of语句创建一个循环遍历可迭代对象，包括：内置字符串，数组，类似数组的对象（例如，参数或NodeList），TypedArray，Map，Set和用户定义的可迭代对象。它调用一个自定义迭代钩子，该钩子要为对象的每个不同属性的值。 -- 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>

Answer 4

您可以使用JavaScript函数获取数组中的所有元素，下面是示例代码。

function getElementArray() {
  var x = document.getElementsByClassName("texte");
  x[0].innerHTML = "Bla bla bla";
}

在这种情况下，

x将保存所有div的数组。

用for循环添加段落

4 个答案: