应使用 insertAdjacentHTML 插入广告，避免 innerHTML += 导致 input 值丢失、textarea 光标重置及事件监听器失效；推荐在 DOMContentLoaded 后操作，配合 template 克隆防 XSS，响应式需控制尺寸与暗色模式适配。
直接用 insertAdjacentHTML 插入广告 DOM 节点，别碰 innerHTML —— 否则段落里所有 input 值、textarea 光标、已绑定的点击事件全丢。
为什么不能用 innerHTML += 往文章里塞广告
常见错误是遍历所有 p 标签，然后对第 3 个做 el.innerHTML += '<div class="ad">...</div>'。这会导致：
- 浏览器先序列化整个
p内容为字符串（含已输入的文字），再解析新 HTML 重建全部子节点 -
<input value="用户刚打的字">的当前值被重置为defaultValue -
<textarea>光标强制跳回开头 - 所有
addEventListener绑定消失，比如“复制段落”按钮失效
insertAdjacentHTML("afterend", adHtml) 插在段落后面最稳妥
这是穿插广告最自然的位置：广告作为独立块级元素，紧贴在某段文字下方，不破坏原有语义流。操作要点：
- 必须等 DOM 加载完再执行，否则
document.querySelectorAll("p")返回空列表 - 推荐用
document.addEventListener("DOMContentLoaded", ...)包裹 - 插入前检查目标
p是否有父节点（避免静默失败） - 广告 HTML 字符串里不能含未转义的双引号，建议用模板字面量或单引号包裹属性
示例：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener("DOMContentLoaded", () => {
const paragraphs = document.querySelectorAll("p");
if (paragraphs.length >= 3) {
const target = paragraphs[2]; // 第三段后插
target.insertAdjacentHTML("afterend", `
<div class="native-ad" data-type="article">
<img src="ad-300x250.jpg" alt="推广">
<small>广告</small>
</div>
`);
}
});
用 <template> 避免字符串拼接 XSS 风险
如果广告内容来自 CMS 或用户配置（比如后台填的 HTML 片段），直接拼进字符串极危险。更安全的做法：
- 把广告结构预定义在
<template id="ad-template">里 - 用
document.getElementById("ad-template").content.cloneNode(true)克隆 - 动态填充可变字段（如
img.src、small.textContent），不拼 HTML 字符串 - 最后用
target.after(clonedAd)或target.insertAdjacentElement("afterend", clonedAd)
这样既保留 DOM 操作的安全性，又避免手动转义漏掉 < 或 &。
响应式广告位要防布局塌陷
穿插广告后，小屏幕下容易撑破容器或遮挡文字。关键控制点：
- 给广告容器加
max-width: 100%和height: auto，图片用object-fit: contain - 避免固定
height，改用aspect-ratio: 4/3（现代浏览器支持）或 padding-top 占位法 - 用
@media (max-width: 768px)把广告设为display: none或换更小尺寸模板 - 如果广告是
<iframe>，务必加sandbox="allow-scripts"并限制同源通信
真正难的不是“怎么插”，而是“插完之后，用户滚动时广告是否卡顿、是否抢焦点、是否在暗色模式下文字看不见”——这些细节得靠真机调试，不是写完 JS 就完事。
