Javascript document.querySelector返回null

我使用JS中的

querySelector

选择我用JS脚本填充的html标记。但是，每当我尝试在

const questionCard

中使用

类
.card
存储div时，我都会得到
null

为什么我不能选择卡片

HTML:



JS:

const questionBlock=document.querySelector（“.card container”）；
const questionCard=document.querySelector（“.card”）；
函数构建（）{
让输出=[]；
…这里有些不重要的代码。。。
输出推送(
`
${current.question}
${answers.join（“”）}
`
);
})
questionBlock.innerHTML=输出；
}
build（）；
在调用
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');

const questionBlock=document.querySelector（“.card container”）；
函数构建（）{
让输出=[]；
…这里有些不重要的代码。。。
输出推送(
`
${current.question}
${answers.join（“”）}
`
);
})
questionBlock.innerHTML=输出；
}
build（）；
const questionCard=document.querySelector（“.card”）；
更正确答案的另一种选择是：

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

现在：
questionCard
是一个活动的
HTMLCollection
，并且
questionCard[0]
将是第一个包含
card
类的元素，在运行
build（）之前，您的html没有包含class
card
的元素
它是在JS中创建的。请参见编辑的注释-
问题卡
不是“动态的”-当代码运行时设置该值-
问题卡
为空，仅因为您随后添加了一个元素，所以没有任何更改。这是否回答了您的问题？
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');

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