如何基于追加的div数量使用HTML与JS自动生成下一页

核心逻辑 #

• 提前预设每页要展示的div数量阈值，不要直接往DOM里无限追加元素
• 把所有要生成的div的原始数据存在JS数组里，避免直接操作DOM做数量统计
• 每次渲染只取当前分页对应的数据切片，用模板字面量生成DOM结构后插入容器
• 每次渲染完成后校验剩余未渲染的数据量，大于0就自动生成/显示下一页按钮，否则隐藏

完整代码示例 #

HTML 结构 #

<!-- 动态div的容器 -->
<div id="cardContainer"></div>
<!-- 分页按钮的容器 -->
<div id="paginationWrap"></div>

JS 逻辑 #

// 配置项
const PER_PAGE_COUNT = 5; // 自定义div数量阈值，可修改
let currentPage = 1; // 记录当前页码
// 示例数据源，可替换为你的实际业务数据
const totalData = new Array(23).fill(null).map((item, index) => `第${index + 1}个div的内容`);

// 列表渲染函数
function renderList() {
  // 计算当前页对应的数据切片范围
  const startIndex = (currentPage - 1) * PER_PAGE_COUNT;
  const endIndex = startIndex + PER_PAGE_COUNT;
  const currentPageData = totalData.slice(startIndex, endIndex);
  
  // 用模板字面量批量生成div结构
  const divHtmlStr = currentPageData.map(item => `
    <div class="dynamic-card">${item}</div>
  `).join('');
  
  // 插入到容器中：如果需要切换分页而非无限追加，把+=改成=即可
  document.querySelector('#cardContainer').innerHTML += divHtmlStr;

  // 自动处理下一页按钮
  const paginationWrap = document.querySelector('#paginationWrap');
  if (endIndex < totalData.length) {
    // 还有剩余数据时生成下一页按钮
    paginationWrap.innerHTML = `<button id="nextBtn">下一页</button>`;
    // 绑定点击事件
    document.querySelector('#nextBtn').addEventListener('click', () => {
      currentPage++;
      renderList();
    });
  } else {
    // 无剩余数据时隐藏按钮
    paginationWrap.innerHTML = '';
  }
}

// 初始化渲染第一页
renderList();

可选优化点 #

• 若需要支持上一页/指定页码跳转，可将追加DOM的逻辑改为替换DOM，每次渲染仅保留当前页内容，避免DOM节点过多导致页面卡顿
• 可增加点击防抖逻辑，避免短时间内多次点击下一页重复渲染
• 若数据是接口异步返回的，可在每次接口请求完成后判断返回数据长度是否达到阈值，未达到则直接隐藏下一页按钮

内容的提问来源于stack exchange，提问作者TolgaKmbl