在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 = `&nbsp; <div class="row">&nbsp; &nbsp; <div class="alert alert-primary w-50 mb-2" role="alert">&nbsp; &nbsp; &nbsp; New genre added.&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="row">&nbsp; &nbsp; <div class="card mb-2 w-50">&nbsp; &nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; &nbsp; <h5 class="card-title">${name}</h5>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>`;const cardsList = document.querySelectorAll('.card-title');console.log(cardsList[0]);<section id="movies">Loading...</section>