本文详解为何 `insertadjacenthtml` 在页面加载完成前调用会失效，并提供基于 `domcontentloaded` 事件的可靠初始化方案，确保 toast 容器等动态元素能正确渲染到 dom 中。
在前端开发中，insertAdjacentHTML() 是一个高效、安全的 DOM 插入方法，支持 'beforebegin'、'afterbegin'、'beforeend' 和 'afterend' 四种插入位置。但其成功执行的前提是：目标父节点（如 document.body）必须已存在于 DOM 树中。
上述代码中，initToast() 立即自执行，此时若脚本置于 <head> 内或未设置 defer/async，浏览器很可能尚未解析出 <body> 标签——导致 document.body 为 null，进而抛出 Cannot read property 'insertAdjacentHTML' of null 错误，容器自然无法生成。
✅ 正确做法是等待 DOM 解析完成后再执行插入逻辑。推荐使用 DOMContentLoaded 事件，它在 HTML 文档完全加载和解析完毕（不等待样式表、图片等资源）后触发，此时 document.body 必然可用：
let toastContainer;
function initToast() {
// ✅ 确保 body 已就绪
if (!document.body) {
console.error('document.body is not available — cannot initialize toast container.');
return;
}
// 插入带内容的容器（避免空 div 不易调试）
document.body.insertAdjacentHTML(
'afterbegin',
'<div class="toast-container" aria-live="polite" aria-atomic="true"></div>'
);
// 缓存引用，供后续 toast 添加使用
toastContainer = document.querySelector('.toast-container');
}
// ? 关键：监听 DOM 加载完成事件
document.addEventListener('DOMContentLoaded', initToast);? 注意事项与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- 不要将初始化逻辑写在立即执行函数表达式（IIFE）中，除非明确保证执行时机晚于 DOM 构建；
- 建议为插入的容器添加语义化属性（如 aria-live="polite"），提升无障碍访问支持；
- 若需兼容旧版 IE（<9），注意 insertAdjacentHTML 不被支持，应降级使用 innerHTML + appendChild 组合；
- 可进一步封装为防重复初始化逻辑，例如通过 toastContainer || initToast() 判断是否已存在。
? 小结：DOM 操作不是“写了就生效”，而是“时机对了才生效”。将 insertAdjacentHTML 调用置于 DOMContentLoaded 回调中，是保障动态容器稳定注入的黄金准则。对于 toast、modal、sidebar 等全局 UI 组件，此模式应作为标准初始化范式。
