Вам необходимо создать элемент span для каждой книги в цикле.Вам также необходимо создать li s и ссылки.Когда вы используете appendChild для добавления элемента, уже находящегося в другом месте документа, он перемещается , а не копируется.
Поскольку вы устанавливаете классы для элементов и т.п., самый простойспособ создания индивидуальных для каждой итерации цикла - использовать cloneNode:
let bookList = document.getElementById("web-book-list");
// Create element
let li = document.createElement("li");
let span; // *** No need to create one here
let linkA = document.createElement("a");
let linkB = document.createElement("a");
// ...
for (let i = 0; i < webBooks.length; i++) {
console.log(webBooks[i]);
const thisSpan = span.cloneNode(true); // ***
thisSpan.innerHTML = webBooks[i].name; // *** No need for += since we're creating a new span
const thisLi = li.clone(true); // ***
thisLi.appendChild(thisSpan); // ***
thisLi.appendChild(linkA.cloneNode(true)); // ***
thisLi.appendChild(linkB.cloneNode(true)); // ***
bookList.appendChild(thisLi); // ***
}
Я также предлагаю не рассматривать текст как HTML, что вы делаете здесь:
thisSpan.innerHTML = webBooks[i].name;
Если в этом имени есть < (или даже вредоносный контент скрипта), было бы проблемой рассматривать его как HTML.Вместо:
thisSpan.appendChild(document.createTextNode(webBooks[i].name));