CODEWITHSUNDEEP
javascripthtml
Tareng Chakma
Tareng Chakma

Reputation: 17

how set createTextNode on existing multiple elementsByClassName?

I want to output like bellow... Output:

•   Bangla is my class book.
•   Math is my class book.
•   English is my class book.
•   Physics is my class book.
•   Chemistry is my class book
•   Biology is my class book.

<ul id="book" >
    <li class="book-item">Bangla</li>
    <li class="book-item">Math</li>
    <li class="book-item">English</li>
    <li class="book-item">Physics</li>
    <li class="book-item">Chemistry</li>
    <li class="book-item">Biology</li>
</ul>

script

var book_item = document.querySelectorAll('.book-item')
var book_item_after = document.createElement('span')
var note = document.createTextNode(" is my class book.")
    book_item_after.appendChild(note)
    for(var i = 0; i < book_item.length; i++){
        book_item[i].appendChild(note)
    }

Upvotes: 0

Views: 45

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371049

You'll either have to call createTextNode inside the loop, or, a better option, use insertAdjacentHTMLwith the existing element instead:

var book_item = document.querySelectorAll('.book-item')

for (var i = 0; i < book_item.length; i++) {
  var book_item_after = document.createElement('span')
  var note = document.createTextNode(" is my class book.")
  book_item_after.appendChild(note)
  book_item[i].appendChild(note)
}
<ul id="book">
  <li class="book-item">Bangla</li>
  <li class="book-item">Math</li>
  <li class="book-item">English</li>
  <li class="book-item">Physics</li>
  <li class="book-item">Chemistry</li>
  <li class="book-item">Biology</li>
</ul>

document.querySelectorAll('.book-item').forEach((li) => {
  li.insertAdjacentHTML('beforeend', '<span> is my class book.</span>');
});
<ul id="book" >
    <li class="book-item">Bangla</li>
    <li class="book-item">Math</li>
    <li class="book-item">English</li>
    <li class="book-item">Physics</li>
    <li class="book-item">Chemistry</li>
    <li class="book-item">Biology</li>
</ul>

Unless you need a <span>, adding to the textContent of the element would be a bit easier:

document.querySelectorAll('.book-item').forEach((li) => {
  li.textContent += ' is my class book.';
});
<ul id="book" >
    <li class="book-item">Bangla</li>
    <li class="book-item">Math</li>
    <li class="book-item">English</li>
    <li class="book-item">Physics</li>
    <li class="book-item">Chemistry</li>
    <li class="book-item">Biology</li>
</ul>

Upvotes: 1

Related Questions