在vanilla JavaScript中，如何在完全加载页面后选择使用innerHTML属性创建

Question

    document.querySelector('#movies').innerHTML = `        <div class="row">          <div class="alert alert-primary w-50 mb-2" role="alert">            New genre added.          </div>        </div>        <div class="row">          <div class="card mb-2 w-50">            <div class="card-body">              <h5 class="card-title">${name}</h5>            </div>          </div>        </div>      `;从代码片段中，我尝试选择那些具有.card-title类的元素  const cardsList = document.querySelectorAll('.card-title');  console.log(cardsList);但它继续返回一个空的NodeList.innerHTML在创建 DOM 并加载页面后，是否真的无法定位使用属性添加的那些元素？

Answer 1

无需特殊治疗。节点一旦插入，就不会记住它们来自哪里。最有可能的是，您在插入实际发生之前运行查询代码。

const name = 'Your Name Here';

document.querySelector('#movies').innerHTML = `

  <div class="row">

    <div class="alert alert-primary w-50 mb-2" role="alert">

      New genre added.

    </div>

  </div>

  <div class="row">

    <div class="card mb-2 w-50">

      <div class="card-body">

        <h5 class="card-title">${name}</h5>

      </div>

    </div>

  </div>

`;

const cardsList = document.querySelectorAll('.card-title');

console.log(cardsList[0]);

<section id="movies">Loading...</section>