Estoy creando una librería para un proyecto que vence en los próximos días.

Necesito inyectar 10 elementos de una matriz en el html, 8 de ellos en 1 sección y los últimos 2 en una sección 'destacada'.

Mi archivo JS actual está imprimiendo las cosas correctas en mi html, pero tengo problemas para inyectar los últimos 2 en la sección destacada.

 fetch('https://www.googleapis.com/books/v1/volumes?q=HTML5') .then(response => response.json()) .then(data => console.log(data)); function handleResponse(obj) { obj.items.forEach((item, index) => { if (index > 7) return; // returns 8 elements from array let div = document.createElement('div'); div.className = 'books'; div.innerHTML = `<img src="${item.volumeInfo.imageLinks.thumbnail}" class="thumbnails" alt="${item.singleTitle} by ${item.volumeInfo.authors[0]}" /> <h4>${item.volumeInfo.title}</h1> <p><strong>${item.volumeInfo.authors}</strong></p> <h8>${item.volumeInfo.description}</h8> <br> <br> <h8>Pages: ${item.volumeInfo.pageCount}</h8>` let container = document.querySelector('.booklist-cards'); container.append(div); }) }

El código donde me gustaría inyectar los últimos 2 en mi html es

 <div> <div> <div class="booklist-featured"> <h1>Featured</h1> <div class="booklist-featured"> book1 </div> <div class="booklist-featured"> book2 </div> </div> </div> </div

También necesito limitar la descripción a 140 caracteres.