深入理解JavaScript：将数组元素动态注入到HTML不同区域的教程

fetch('https://www.googleapis.com/books/v1/volumes?q=HTML5')
    .then(response => response.json()) // 将响应转换为JSON格式
    .then(data => handleResponse(data)) // 调用处理函数
    .catch(error => console.error('Error fetching data:', error)); // 错误处理

function handleResponse(data) {
    if (!data || !data.items || data.items.length === 0) {
        console.warn('No items found or invalid data structure.');
        return;
    }

    // 假设原始数组是可变的，或者我们先复制一份
    // 注意：splice会修改原数组。如果不想修改原数组，应先复制一份：
    // const allBooks = [...data.items];
    const allBooks = data.items; // 直接操作原始数组的引用

    // 使用 splice 从索引8开始（即第9个元素，因为索引从0开始）删除2个元素。
    // splice(startIndex, deleteCount)
    // 这里的 otherBooks 变量实际上是 allBooks 数组的引用，
    // 在 splice 操作后，allBooks 将只包含前8个元素。
    // featuredBooks 则会得到被删除的最后2个元素。
    const featuredBooks = allBooks.splice(8, 2); // 提取最后2个元素作为特色书籍
    const otherBooks = allBooks; // 剩余的8个元素作为普通书籍

    // 获取DOM容器
    const featuredContainer = document.querySelector('.featured-books');
    const otherContainer = document.querySelector('.other-books');

    // 渲染特色书籍和普通书籍
    if (featuredContainer) {
        featuredContainer.insertAdjacentHTML('beforeend', renderListHtml(featuredBooks));
    }
    if (otherContainer) {
        otherContainer.insertAdjacentHTML('beforeend', renderListHtml(otherBooks));
    }
}

<section>
    <h1>特色书籍</h1>
    <ul class="featured-books">
        <!-- 特色书籍将在此处动态插入 -->
    </ul>
</section>

<section>
    <h1>其他书籍</h1>
    <ul class="other-books">
        <!-- 其他书籍将在此处动态插入 -->
    </ul>
</section>

/**
 * 生成书籍列表的HTML字符串
 * @param {Array} items - 书籍数据数组
 * @returns {string} - 包含所有书籍项的HTML字符串
 */
function renderListHtml(items) {
    if (!items || items.length === 0) {
        return '<p>暂无内容。</p>';
    }
    return items.map(item => renderItemHtml(item)).join('');
}

/**
 * 生成单个书籍项的HTML字符串，并限制描述长度
 * @param {Object} item - 单个书籍数据对象
 * @returns {string} - 单个书籍项的HTML字符串
 */
function renderItemHtml(item) {
    const title = item.volumeInfo.title || '未知标题';
    const authors = (item.volumeInfo.authors && item.volumeInfo.authors.join(', ')) || '未知作者';
    const thumbnail = item.volumeInfo.imageLinks && item.volumeInfo.imageLinks.thumbnail
                      ? item.volumeInfo.imageLinks.thumbnail
                      : 'placeholder.jpg'; // 提供一个默认图片
    let description = item.volumeInfo.description || '';

    // 限制描述长度为140字符
    if (description.length > 140) {
        description = description.substring(0, 140) + '...';
    }

    return `
        <li class="book">
            <img src="${thumbnail}" alt="${title} by ${authors}" class="thumbnail" />
            <div class="book-info">
                <h4>${title}</h4>
                <p><strong>${authors}</strong></p>
                <p class="description">${description}</p>
                <p>页数: ${item.volumeInfo.pageCount || '未知'}</p>
            </div>
        </li>
    `;
}

// ... 在 handleResponse 函数内部 ...
    const featuredContainer = document.querySelector('.featured-books');
    const otherContainer = document.querySelector('.other-books');

    if (featuredContainer) {
        featuredContainer.insertAdjacentHTML('beforeend', renderListHtml(featuredBooks));
    }
    if (otherContainer) {
        otherContainer.insertAdjacentHTML('beforeend', renderListHtml(otherBooks));
    }
// ...

.book {
    display: flex; /* 使用Flexbox布局 */
    padding: 10px;
    gap: 15px; /* 项目之间的间距 */
    border-bottom: 1px solid #eee;
    align-items: flex-start; /* 顶部对齐 */
}

.book:last-child {
    border-bottom: none; /* 最后一个元素不显示底部边框 */
}

.book .thumbnail {
    width: 80px; /* 缩略图宽度 */
    height: auto;
    object-fit: cover; /* 保持图片比例 */
    border-radius: 4px;
}

.book .book-info {
    flex-grow: 1; /* 占据剩余空间 */
}

.book h4 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #333;
}

.book p {
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #666;
}

.book p.description {
    font-size: 0.85em;
    line-height: 1.4;
    color: #555;
}

/* 针对特色书籍可以添加额外样式 */
.featured-books .book {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
}