使用insertAdjacentHTML未在DOM中生成toast容器的问题排查

问题代码 #

let toastContainer;
(function initToast () {
    document.body.insertAdjacentHTML('afterbegin', '<div class="toast-container"></div>');
    toastContainer = document.querySelector('.toast-container');
})()

问题原因 #

你错误地使用了HTML实体编码（<、>、"）作为insertAdjacentHTML的参数。这个方法接收的是原生HTML字符串，不需要转义标签尖括号和引号——转义后浏览器会把这些实体当作普通文本渲染，而不是解析成HTML标签，自然不会生成目标容器。

修复方案 #

直接传入未转义的HTML字符串即可，以下几种写法都可行：

1. 双引号包裹属性，单引号包裹HTML字符串：

let toastContainer;
(function initToast () {
    document.body.insertAdjacentHTML('afterbegin', '<div class="toast-container"></div>');
    toastContainer = document.querySelector('.toast-container');
})()

2. 使用模板字符串（适合后续扩展复杂Toast结构）：

let toastContainer;
(function initToast () {
    document.body.insertAdjacentHTML('afterbegin', `<div class="toast-container"></div>`);
    toastContainer = document.querySelector('.toast-container');
})()

修复后执行代码，<div class="toast-container">会被正确插入到<body>的起始位置，toastContainer也能成功获取到该DOM元素。

内容的提问来源于stack exchange，提问作者zanzibar