用JavaScript拼接HTML字符串最轻量，需清空旧内容防重复、转义特殊字符防XSS、确保容器存在；JSON数组用map+join生成结构，绑定事件用委托，fetch后须在DOMContentLoaded或then中插入DOM。
轮播图怎么用动态数据生成 HTML？
直接用 JavaScript 拼接 HTML 字符串是最轻量、最可控的方式，不需要框架也能跑通。关键不是“能不能”，而是“怎么避免 DOM 重复渲染和内存泄漏”。
-
innerHTML赋值前必须清空旧内容，否则会不断追加导致重复轮播项 - 动态数据里如果有 HTML 特殊字符（如
<、"），不转义会导致解析错误或 XSS 风险 - 轮播图容器（比如
<div id="carousel">）必须存在且有明确 ID，否则 JS 找不到挂载点
怎么把 JSON 数组转成轮播图 HTML 结构？
假设后端返回的是标准 JSON 数组，每个对象含 imgUrl、title、link 字段。用 map() + join() 生成结构最安全：
const data = [
{ imgUrl: "/img/1.jpg", title: "首页推荐", link: "/promo/a" },
{ imgUrl: "/img/2.jpg", title: "限时特惠", link: "/promo/b" }
];
const html = data.map(item => `
<a href="${item.link}">
<img src="${item.imgUrl}" alt="${item.title}" loading="lazy">
</a>
`).join('');
document.getElementById('carousel').innerHTML = html;
注意：loading="lazy" 是浏览器原生支持的懒加载属性，对首屏性能有帮助；alt 值必须来自数据，不能写死。
轮播图自动切换时，DOM 更新后事件绑定失效怎么办？
用 innerHTML 替换整个轮播区域后，之前绑定的 click 或 mouseenter 事件全丢了——这是最常被忽略的坑。
立即学习“前端免费学习笔记（深入）”；
- 不要在每次更新后重新
addEventListener所有元素，容易重复绑定 - 改用事件委托：把事件监听器挂在父容器（如
#carousel），用event.target.matches('a')判断是否点击了轮播链接 - 如果要用
swiper或slick这类库，必须调用其destroy()+new Swiper()重建实例，不能只刷新 HTML
为什么用 fetch 加载数据后轮播图没显示？
常见原因不是接口失败，而是 DOM 尚未就绪就执行了插入逻辑。
- 确保 JS 在
<body>底部执行，或包装在DOMContentLoaded里 -
fetch是异步的，插入 HTML 的代码必须写在.then()内部，不能放在外面 - 检查浏览器控制台是否有
TypeError: Cannot set property 'innerHTML' of null—— 说明getElementById返回了null
动态轮播图真正的复杂点不在“怎么画出来”，而在于“怎么在数据变、DOM 变、用户交互变的三重变化下保持稳定”。尤其是移动端频繁触发 resize 或 orientationchange 时，别让轮播图自己偷偷重建两次。
