當我使用insertAdjacentHTML時查詢選擇器爲空

-2

我使用insertAdjacentHtml在頁面的開始正文標記之後使用按鈕創建div。當我使用insertAdjacentHTML時查詢選擇器爲空

<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出現錯誤。

遺漏的類型錯誤：無法讀取空的特性「querySelector」

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

顯然，這看起來像我有覆蓋按鈕和覆蓋DIV存在，但它仍然沒有工作。它工作正常，但不使用insertAdjacentHTML，但是一旦我將此代碼包裝在此函數中，就會出現錯誤，因此我在使用此函數創建我的div時正在考慮這裏發生了什麼。

任何人都可以幫助調試或解決問題嗎？

來源

2016-08-15 kevinkt

當代碼是正在運行的第二件？你的錯誤會告訴我代碼正在* DOMContentLoaded之前運行*，因此在主體中不存在div.overlay。 –

@LiamEgan謝謝你是對的。它在添加後工作：（document.addEventListener（「DOMContentLoaded」，function（）{ \t \t \t var overlay = document.querySelector（'div.overlay'）， – kevinkt

的代碼無法載入DomContentLoaded之前，所以我改變了我的代碼如下：

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

來源

2016-08-15 01:46:13 kevinkt

當我使用insertAdjacentHTML時查詢選擇器爲空

回答

相關問題