html列表动态加载更多需后端返回json（含items、has_more、next_offset），前端用insertadjacenthtml安全追加，按钮防连点并依has_more控制显隐，禁用innerhtml+=和html字符串接口。
HTML列表动态加载更多，核心是“不刷新页面、只追加内容”，关键不在标签本身（ul/ol/li只是容器），而在JavaScript如何安全、可控地把新项塞进去。直接拼HTML字符串或重写innerHTML容易出问题，得用更稳妥的方式。
后端必须返回结构化数据，不是HTML片段
接口应返回JSON，包含明确字段：
- items：数组，每个对象含id、title、excerpt等与首屏一致的字段
- has_more：布尔值，决定“加载更多”按钮是否继续显示
- next_offset 或 next_page：下一次请求用的分页参数，别让前端自己+1算，防跳页和重复拉取
返回带
前端用insertAdjacentHTML追加，不碰已有DOM
拿到数据后，把每条生成HTML字符串，再用insertAdjacentHTML('beforeend', htmlString)插入到ul或ol末尾：
- 它只新增节点，不会重新解析整个列表，已有的事件监听、焦点、滚动位置全保留
- 避免用
innerHTML +=，那会强制重绘全部内容 - 如果想更安全，可用
document.createElement逐个创建li再append，但性能略低
按钮点击必须防连点+显状态
用户手快连点两次，会导致请求乱序、内容覆盖甚至重复插入：
- 点击瞬间设
button.disabled = true，并加is-loading类触发CSS骨架或文字变“加载中…” - 响应成功或失败后，再恢复按钮状态；失败时要提示错误，按钮必须仍可点
- 务必在事件回调里写
event.preventDefault()，尤其按钮在form内或没设type="button"时
判断是否该加载，信后端字段，别只看数组长度
后端返回{"items":[],"has_more":false}才代表真没更多；如果只检查data.items.length === 0，网络错误或空响应会被误判为“到底了”，导致按钮消失、用户无法重试：
- 用
response.has_more控制按钮显隐 - 用
response.next_offset作为下次请求参数，不靠前端硬算 - 加载中设
isLoading = true标志，防止滚动或点击重复触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
