document.querySelector返回null

Question

我使用JS中的public class Program { private static readonly rng = new System.Random(); public static string RandomNumber() { var bytes = new byte[8]; rng.NextBytes(bytes); return Convert.ToBase64String(bytes); } public static void Main() { Console.WriteLine(RandomNumber()); Console.WriteLine(RandomNumber()); } } 来选择我用JS脚本填充的html标记。但是，无论何时我尝试在querySelector中存储.card类的div，我都会const questionCard。

为什么我不能选择卡片？

HTML：

null

JS：

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

Answer 1

在调用document.querySelector('.card')后，您需要致电build() 。它找不到尚不存在的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]将是第一个包含card

类的类元素