Question

我使用insertAdjacentHtml在页面的开始正文标记后面创建一个带按钮的div。

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

但是我的closeBttn上的querySelector出错了。

未捕获的TypeError：无法读取属性＆＃39; querySelector＆＃39;为null

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

显然，我看起来有叠加按钮和叠加div，但它仍然无效。它在没有使用insertAdjacentHTML的情况下工作正常，但是一旦我将代码包装在这个函数中，我就会收到错误，所以当我使用这个函数来创建div时，我在想这里有什么东西。

任何人都可以帮忙调试或解决问题吗？

Answer 1

代码在DomContentLoaded之前加载，所以我将代码更改为以下内容：

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

当我使用insertAdjacentHTML

1 个答案: