时间戳

首页 > 解决方案 > 在 vanilla JavaScript 中，如何在完全加载页面后选择使用 innerHTML 属性创建的元素？

javascript - 在 vanilla JavaScript 中，如何在完全加载页面后选择使用 innerHTML 属性创建的元素？

问题描述

      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 并加载页面之后，是否真的不可能定位那些使用属性添加的元素？

标签： javascripthtml

解决方案

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

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>

推荐阅读