本文详解为何 `document.body.insertadjacenthtml()` 失败的常见原因，并提供可靠解决方案：必须等待 dom 加载完成（`domcontentloaded`），否则 `document.body` 为 `null`，导致插入失败。
在使用 insertAdjacentHTML() 动态向页面注入结构（如 toast 容器）时，一个极易被忽略却高频出现的问题是：代码执行过早，DOM 尚未就绪。例如以下初始化逻辑看似简洁：
let toastContainer;
(function initToast() {
document.body.insertAdjacentHTML('afterbegin', '<div class="toast-container"></div>');
toastContainer = document.querySelector('.toast-container');
})();这段代码在全局作用域立即执行（IIFE），但此时若脚本置于
中或未设置 defer/async，浏览器很可能尚未解析出 元素——document.body 仍为 null，调用 insertAdjacentHTML 将直接抛出 TypeError，且无任何视觉反馈，导致容器“凭空消失”。✅ 正确做法是：确保 DOM 完全加载后再执行插入操作。推荐使用 DOMContentLoaded 事件，它在 HTML 文档完全解析、DOM 树构建完毕后触发（不等待样式表、图片等资源）：
let toastContainer;
function initToast() {
// ✅ 安全前提：document.body 已存在
document.body.insertAdjacentHTML(
'afterbegin',
'<div class="toast-container" aria-live="polite" aria-atomic="true"></div>'
);
toastContainer = document.querySelector('.toast-container');
}
// ? 关键：监听 DOM 加载完成事件
document.addEventListener('DOMContentLoaded', initToast);? 提示：window.addEventListener('DOMContentLoaded', ...) 与 document.addEventListener(...) 效果一致，但语义上 document 更精准。
此外，为保障可访问性与功能健壮性，建议在插入的容器中添加 ARIA 属性（如 aria-live="polite"），便于屏幕阅读器感知动态通知内容。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- ❌ 避免将脚本放在 内且无 defer 属性；
- ❌ 不要依赖 window.onload（它需等待所有资源加载，延迟更高）；
- ✅ 若使用模块化脚本（type="module"），其默认具有 defer 行为，但仍建议显式监听 DOMContentLoaded 以明确执行时机；
- ✅ 可进一步封装为防重复初始化函数（检查 toastContainer 是否已存在），提升容错性。
最终，配合简单 CSS 即可让容器可见并为后续 toast 渲染奠定基础：
.toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 1000;
max-width: 320px;
}遵循这一时机原则，你的动态 DOM 插入将稳定可靠——不仅是 toast 容器，所有依赖 document.body 或具体节点的操作，都应以此为基准。
