Как установить createTextNode на существующие несколько элементовByClassName?

Question

Я хочу вывести, как показано ниже ... Вывод:

•   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)
    }

Answer 1

Вам придется либо вызвать createTextNode внутри l oop, либо, что лучше, использовать вместо этого insertAdjacentHTML с существующим элементом:

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>

Если вам не нужен <span>, добавление к textContent элемента будет немного проще:

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>