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