使用insertadjacenthtml和不生成到DOM的内容

Question

我试图在一个小网站上为用户写一个祝酒通知。我目前有一个函数初始化这段代码，我希望这个函数生成一个容器，我的toast通知将被放置在其中。

这是我的初始化函数。

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

我希望在DOM中创建

Answer 1

您的容器是空的，但您的代码需要一些更改。

等待DOMContentLoaded调用你的函数。

否则控制台可能有document.body is null

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

.toast-container{
background-color: antiquewhite;
}