innerHTML是替换广告位HTML内容最直接高效的方案，但需确保DOM加载完成、过滤用户输入、合理处理轮播与错误降级，并注意事件监听器丢失问题。
用 innerHTML 替换广告位 HTML 内容最直接
广告内容含图片、链接、按钮等结构时，innerHTML 是最快落地的方案。它直接替换整个子树，无需手动创建节点。
常见错误是脚本执行过早——DOM 还没加载完就调用 document.getElementById，返回 null 导致报错 Cannot set property 'innerHTML' of null。
- 必须把广告更新逻辑包在
document.addEventListener('DOMContentLoaded', () => { ... })里 - 确保 HTML 中广告容器已有唯一 ID，例如
- 若广告来自后端 API，记得用
fetch()拿到数据后再赋值，别直接写死字符串 - 用户可控输入（如 CMS 后台填的广告文案）必须过滤：用
textContent渲染纯文本，或先用DOMPurify.sanitize()处理 HTML 字符串
用 textContent 更新纯文字广告更安全
如果广告只是标题 + 一行说明文字（比如“限时优惠｜满 200 减 50”），textContent 是更优选择：不解析标签、无 XSS 风险、性能略高。
容易踩的坑是误用 innerText：它受 CSS 影响（如 display: none 的元素内容不计入），且在 Firefox 中对换行处理不一致。
- 统一用
textContent，兼容性好、行为确定 - 更新前可加简单校验：
if (typeof newText === 'string' && newText.trim()) { el.textContent = newText } - 不要指望它保留空格或换行 —— 它会压缩连续空白，需要换行请用
innerHTML
广告轮播需用 setInterval + 状态管理
多个广告图/文案按秒切换，本质是定时触发内容替换，但不能只靠 setInterval(updateAd, 5000) 就完事。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
真实场景中常遇到：用户切到其他标签页时轮播卡住、回到页面瞬间连播两帧、点击暂停后恢复逻辑错乱。
- 用
visibilitychange事件监听页面可见性，不可见时clearInterval，可见时重置定时器 - 轮播索引变量（如
currentAdIndex）必须定义在闭包或模块作用域内，避免全局污染和并发冲突 - 每次替换前先清空旧定时器再设新定时器，防止多次调用
startAdRotation()导致多个定时器叠加 - 切换动画建议用 CSS
opacity+transition，而非 JS 改display—— 后者会触发回流，影响性能
广告内容来自远程时，fetch 错误处理不能省略
从广告平台接口拉取 HTML 片段（如 https://ads.example.com/banner?pos=header）是常见做法，但网络失败、超时、404、CORS 都会导致白屏或报错。
很多人只写 fetch(url).then(r => r.text()).then(html => el.innerHTML = html)，漏掉拒绝路径和降级逻辑。
- 必须捕获
fetch异常：catch(err => console.warn('广告加载失败:', err)) - HTTP 错误状态（如 503）不会进
catch，需手动检查response.ok - 建议设置超时：
AbortController配合fetch({ signal })，避免请求挂起阻塞后续广告 - 准备 fallback 内容（如静态图片或空 div），在加载失败时显示，而不是留白
真实项目里最容易被忽略的是广告 DOM 节点复用问题：同一广告位反复用 innerHTML 替换，里面绑定的事件监听器、第三方脚本（如统计埋点）、IntersectionObserver 实例都会丢失，得在每次替换后重新初始化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
