title: document.querySelector returns null
body: <p>I use the <code>querySelector</code> in JS to select html markup that I filled in with a JS script. However, anytime I try to store the divs with a class of <code>.card</code> in the <code>const questionCard</code>, I get <code>null</code>. </p>
  
  <p>Why can't I select the cards?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='card-container'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>const questionBlock = document.querySelector('.card-container');
  const questionCard = document.querySelector('.card');
  
  function build() {
      let output = [];
  
      ...some unimportant code here...
  
        output.push(
          `
            &lt;div class='card'&gt;
              &lt;div class='question'&gt;${current.question}&lt;/div&gt;
              &lt;div class='answers'&gt;${answers.join('')}&lt;/div&gt;
            &lt;/div&gt;
          `
        );
      })
  
      questionBlock.innerHTML = output;
  }
  
  build();
  </code></pre>