如何选中JavaScript动态创建并追加到DOM的元素？

核心原因 #

document.querySelectorAll('.card') 只会在方法执行的瞬间，匹配当前已经挂载到页面DOM树中的对应元素，无法自动追踪后续新增的节点。获取不到结果本质是代码执行顺序错误，在元素还没被创建/追加到DOM时就提前执行了选择逻辑。

注意：querySelectorAll 未匹配到目标时返回的是长度为0的NodeList，并非null，如果返回值为null请先检查是否存在方法名拼写错误、选择器语法错误。

正确操作步骤 #

• 先完成所有动态元素的全流程创建：
  1. 先选中页面中已经存在的目标容器节点
  2. 创建新的div元素，给元素添加card类名（不要漏加类名、不要写错类名）
  3. 将创建好的card元素追加到容器节点中，确认容器本身是已经挂载到DOM树的，不要把元素追加到游离在DOM外的临时节点上
     参考代码：

  // 先获取已存在的容器
  const container = document.querySelector('.card-wrap');
  // 批量创建卡片
  for (let i = 0; i < 10; i++) {
    const card = document.createElement('div');
    // 给元素添加对应类名
    card.classList.add('card');
    card.innerText = `卡片${i + 1}`;
    // 追加到已在DOM内的容器中
    container.appendChild(card);
  }
  

• 等所有card元素全部追加到DOM完成后，再执行选择逻辑，即可拿到所有目标元素：

  // 必须放在所有append操作之后执行
  const cards = document.querySelectorAll('.card');
  console.log(cards); // 输出包含所有新增card的NodeList集合
  

常见排查点 #

• 检查类名是否拼写一致，注意类名大小写敏感
• 检查追加元素的容器是否本身就在DOM树中，若容器也是动态创建的，需要先把容器追加到页面，再往容器里追加card元素
• 不要把选择逻辑写在动态创建元素的代码块之前，也不要放在元素还没追加完成的异步回调之前

内容的提问来源于stack exchange，提问作者john