如何从一个数组创建多个 HTML 元素？答案

【问题标题】：How to create multiple HTML elements from an Array?如何从一个数组创建多个 HTML 元素？
【发布时间】：2019-07-18 04:04:56
【问题描述】：

我有一个从 Google Books API 获取图书列表的简单网站。我有一个名为 scripts.js 的单独文件，用于获取所有图书信息（书名、作者、ISBN、图片链接）。

我想在画廊风格的页面中为每本书创建一个 div，其中有书的图片，书的顶部是书名、作者和 ISBN。

我尝试在 Javascript 中创建 DIV，但我希望在每个 DIV 中都有一个 h3、p 和 img，但我似乎无法理解如何在 Javascript 中做到这一点。

我的画廊 HTML 代码：

<div id="content">
            <h2>My Bookshelf</h2>
            <div class="book">
                <!-- The book image is the background of the div -->
                <h3 class="book-title">Title</h3>
                <p class="book-isbn">ISBN: 000000</p>
                <p class="book-author">Authors: ABC</p>
            </div>
        </div>

我的 Javascript 代码循环遍历 JSON 文件并返回所需信息。

// Returns an array with the book title, ISBN, author, bookmark icon, description, image 
    apiRequest.onreadystatechange = () => {
        if (apiRequest.readyState === 4) {
            const response = JSON.parse(apiRequest.response);
            var bookList = response.items;
            // Removes old search results before display new ones
            bookSection.innerHTML = "";
            for (let i = 0; i < bookList.length; i++) {
                console.log(i);
                var title = (bookList[i]["volumeInfo"]["title"]);
                try {
                    var isbn = (bookList[i]["volumeInfo"]["industryIdentifiers"][0]["identifier"]);
                } catch (TypeError) {
                    var isbn = "ISBN Not Available";
                }
                var author = (bookList[i]["volumeInfo"]["authors"]);
                var description = (bookList[i]["description"]);
                try {
                    var image = (bookList[i]["volumeInfo"]["imageLinks"]["thumbnail"]);
                } catch (TypeError) {
                    var image = "img/unavailable.png";
                }
            }
        }
    }

【问题讨论】：

标签： javascript html google-books

【解决方案1】：

您可以使用模板文字来简化您的工作。

你可以这样做：

var bookSection = `<div id="content">
        <h2>My Bookshelf</h2>
        <div class="book">
            <!-- The book image is the background of the div -->
            <h3 class="book-title">${titleVar}</h3>
            <p class="book-isbn">ISBN: ${ISBNVar}</p>
            <p class="book-author">Authors: ${AuthorsVar}</p>
        </div>
    </div>`;

从此处了解有关模板文字的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

【讨论】：

【解决方案2】：

你的代码应该是这样的

apiRequest.onreadystatechange = () => {
    if (apiRequest.readyState === 4) {
        const response = JSON.parse(apiRequest.response);
        var bookList = response.items;
        // Removes old search results before display new ones
        bookSection.innerHTML = "";
        let bookListHtmlMarkup = '';
        for (let i = 0; i < bookList.length; i++) {
            console.log(i);
            // Declaring book object
            const book = {};
            const bookListHtmlMarkup = '';
            book['title'] = (bookList[i]["volumeInfo"]["title"]);
            try {
                book['isbn'] = (bookList[i]["volumeInfo"]["industryIdentifiers"][0]["identifier"]);
            } catch (TypeError) {
                book['isbn'] = "ISBN Not Available";
            }
            book['author'] = (bookList[i]["volumeInfo"]["authors"]);
            book['description'] = (bookList[i]["description"]);
            try {
                book['image'] = (bookList[i]["volumeInfo"]["imageLinks"]["thumbnail"]);
            } catch (TypeError) {
                book['image'] = "img/unavailable.png";
            }

            bookListHtmlMarkup += `
                <div class="book">
                    <div class="book-image">
                        <img src="${book.image}" alt="Image unavailable" />
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">${book.title}</h3>
                        <p class="book-isbn">ISBN: ${book.isbn}</p>
                        <p class="book-author">Author: ${book.author}</p>
                        <p class="book-description">Author: ${book.description}</p>
                    </div>
                </div>
            `;
        }
        // Assigning generated markup to innerHTML of bookSection
        bookSection.innerHTML = bookListHtmlMarkup;
    }

}

【讨论】：