document.querySelectorはnullを返します

Question

JSでquerySelectorを使用して、JSスクリプトで埋め込んだhtmlマークアップを選択します。しかし、const questionCardに.cardというクラスのdivを格納しようとすると、いつでもnullとなります。

カードを選択できないのはなぜですか？

HTML：

<div class='card-container'></div> 

JS：

const questionBlock = document.querySelector('.card-container'); 
const questionCard = document.querySelector('.card'); 

function build() { 
    let output = []; 

    ...some unimportant code here... 

     output.push(
     ` 
      <div class='card'> 
      <div class='question'>${current.question}</div> 
      <div class='answers'>${answers.join('')}</div> 
      </div> 
     ` 
    ); 
    }) 

    questionBlock.innerHTML = output; 
} 

build(); 

Answer 1

あなたはbuild()を呼び出し後document.querySelector('.card')を呼び出す必要があります。まだ存在しないHTML要素を見つけることはできません。

const questionBlock = document.querySelector('.card-container'); 

function build() { 
    let output = []; 

    ...some unimportant code here... 

     output.push(
     ` 
      <div class='card'> 
      <div class='question'>${current.question}</div> 
      <div class='answers'>${answers.join('')}</div> 
      </div> 
     ` 
    ); 
    }) 

    questionBlock.innerHTML = output; 
} 

build(); 

const questionCard = document.querySelector('.card'); 

Answer 2

より正解に代わるものは次のとおりです。今

const questionCard = document.getElementsByClassName('card'); 

：questionCardライブHTMLCollectionあり、そしてquestionCard[0]は、あなたのHTMLがありませんcard