HTML列表标签如何实现动态加载更多的列表项

HTML列表动态加载更多需后端返回JSON（含items、has_more、next_offset），前端用insertAdjacentHTML安全追加，按钮防连点并依has_more控制显隐，禁用innerHTML+=和HTML字符串接口。

HTML列表动态加载更多，核心是“不刷新页面、只追加内容”，关键不在标签本身（ul/ol/li只是容器），而在JavaScript如何安全、可控地把新项塞进去。直接拼HTML字符串或重写innerHTML容易出问题，得用更稳妥的方式。

后端必须返回结构化数据，不是HTML片段

接口应返回JSON，包含明确字段：

1. items：数组，每个对象含id、title、excerpt等与首屏一致的字段
2. has_more：布尔值，决定“加载更多”按钮是否继续显示
3. next_offset 或 next_page：下一次请求用的分页参数，别让前端自己+1算，防跳页和重复拉取

返回带<div></div>的HTML字符串是危险做法——破坏语义、影响SEO、易引发XSS，也难做DOM事件绑定。

前端用insertAdjacentHTML追加，不碰已有DOM

拿到数据后，把每条生成HTML字符串，再用insertAdjacentHTML('beforeend', htmlString)插入到ul或ol末尾：

1. 它只新增节点，不会重新解析整个列表，已有的事件监听、焦点、滚动位置全保留
2. 避免用innerHTML +=，那会强制重绘全部内容
3. 如果想更安全，可用document.createElement逐个创建li再append，但性能略低

按钮点击必须防连点+显状态

用户手快连点两次，会导致请求乱序、内容覆盖甚至重复插入：

1. 点击瞬间设button.disabled = true，并加is-loading类触发CSS骨架或文字变“加载中…”
2. 响应成功或失败后，再恢复按钮状态；失败时要提示错误，按钮必须仍可点
3. 务必在事件回调里写event.preventDefault()，尤其按钮在form内或没设type="button"时

判断是否该加载，信后端字段，别只看数组长度

后端返回{"items":[],"has_more":false}才代表真没更多；如果只检查data.items.length === 0，网络错误或空响应会被误判为“到底了”，导致按钮消失、用户无法重试：

1. 用response.has_more控制按钮显隐
2. 用response.next_offset作为下次请求参数，不靠前端硬算
3. 加载中设isLoading = true标志，防止滚动或点击重复触发