I'm trying to display google books API data in a book list and at the same time generate a separate button (which is going to link to that book) for each list entry. So basically the button needs to act just like the list entries, appearing only as they do.
This information displays after hitting a search button, which gets back this data from the API, and arranges it into div and list format. Currently I've got all the API data to show up how it's supposed to, I just don't know how to get a button to appear for each book as well. I don't want the buttons to already be on the page, but be generated once the function runs, which is when the user makes a search.
<script>
var createBookList = function(book) {
bookTitle.textContent = book.volumeInfo.title;
bookAuthors.textContent = book.volumeInfo.authors;
bookDescription.textContent = book.volumeInfo.description ? book.volumeInfo.description: " Description unavailable";
bookThumbnail.src = book.volumeInfo.imageLinks ?
book.volumeInfo.imageLinks.thumbnail :
div.appendChild(bookTitle);
div.appendChild(bookAuthors);
div.appendChild(bookDescription);
singleBookRow.appendChild(bookThumbnail);
singleBookRow.appendChild(div);
li.appendChild(singleBookRow);
li.classList.add('list-group-item');
singleBookRow.classList.add('row');
div.classList.add('columns-large-4');
bookThumbnail.classList.add('columns-small-3', 'rwd');
booksList.appendChild(li);
}
</script>