Javascript 使用insertAdjacentHTML时，查询选择器为Null

我正在使用insertAdjacentHtml创建一个div，该div在页面的开始body标记后面有一个按钮

<script>document.addEventListener('DOMContentLoaded', function(){
            var code = '<div class="overlay"><button class="overlay-close"></button></div>';
            document.body.insertAdjacentHTML('afterbegin', code);
        }, false);</script>

document.addEventListener（'DOMContentLoaded'，function（）{
var代码=“”；
document.body.insertAdjacentHTML（'afterbegin'，代码）；
}，假）；

但是我的closeBttn上的querySelector出现了一个错误

未捕获的TypeError:无法读取null的属性“querySelector”

<script>
        (function() {
            var overlay = document.querySelector( 'div.overlay' ),
                closeBttn = overlay.querySelector( 'button.overlay-close' );
                /* irrelevent other code here */
        })();
</script>

（功能（）{
var overlay=document.querySelector（'div.overlay'），
closeBttn=overlay.querySelector（'button.overlay-close'）；
/*此处不相关的其他代码*/
})();

显然，它看起来像我有覆盖按钮和覆盖div存在，但它仍然不工作。不使用insertAdjacentHTML，它可以正常工作，但是一旦我将代码包装到这个函数中，就会出现错误，所以我认为当我使用这个函数创建div时，这里发生了一些事情

---

有人能帮忙调试或解决问题吗？

代码是在加载DomContentLoaded之前加载的，因此我将代码更改为以下内容：

<script>
        (document.addEventListener("DOMContentLoaded",function() {
            var overlay = document.querySelector( 'div.overlay' ),
                closeBttn = overlay.querySelector( 'button.overlay-close' );
                /* irrelevent other code here */
        }));
</script>

（document.addEventListener（“DOMContentLoaded”，function（））{
var overlay=document.querySelector（'div.overlay'），
closeBttn=overlay.querySelector（'button.overlay-close'）；
/*此处不相关的其他代码*/
}));

第二段代码何时运行？您的错误将向我表明，代码是在加载DOMContentLoaded之前运行的，因此正文中不存在div.overlay。@LiamEgan，谢谢您的回答。它在添加以下内容后工作：（document.addEventListener（“DOMContentLoaded”，function（）{var overlay=document.querySelector（'div.overlay'），