Query Selector is Null when I use insertAdjacentHTML : <p>I'm using insertAdjacentHtml to create a div with a button right after the opening body tag of the page.</p>

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

<p>But I get an error with the querySelector on my closeBttn.</p>

<p>Uncaught TypeError: Cannot read property 'querySelector' of null</p>

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

<p>Clearly it looks like I have the overlay button and overlay div present, but it still not working. It works fine without using insertAdjacentHTML, but once I wrapped my code in this function, I get the error, so I'm thinking there's something going on here when I use this function to create my div.</p>

<p>Can anyone help to debug or give a work around?</p>
