The next method is also the longest. This method accepts MediaCollection<Book> as input and appends it to the DOM. By doing this, we can leverage template strings. These will allow us to write HTML code easily without requiring a lot of escape characters that would otherwise be needed if we used standard or single quotes instead.
The following is the code:
renderBookCollection(bookCollection: Readonly<MediaCollection<Book>>): void {
this._bookCollectionsContainer.innerHTML += `
<div id="bookCollection-${bookCollection.identifier}" class="collection"> <h3 class="collectionName">${bookCollection.name}</h3> <div class="containerGroup"> <div class="container"> <h3>New book</h3> <form id="newBook-${bookCollection.identifier}" ...
