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

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>
      `;

From the code snippets, I am trying to select those elements with .card-title class

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

but it keeps on returning an empty NodeList .

Is it really not possible to target those elements added using innerHTML property after the DOM has been created and the page already loaded?

Answer 1

No special treatment is needed. Nodes, once inserted, don't remember where they come from. Most likely, you're running query code before insertion actually happens.

 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>

Answer 2

windows.onload could be a problem on a older browser like IE8. windows.onload should work, but it's slow because it waits all the assets to be loaded into the page (images, css, etc).

https://jsfiddle.net/zwud3m26/ - using windows.onload

It is better to use a function similar with the one from jQuery, like this one: documentReady() is similar but in vanilla JS. It fires when the DOM is loaded.

Check this jsfiddle: https://jsfiddle.net/30qhnayw/

 function documentReady(callbackFunc) { if (document.readyState;== 'loading') { callbackFunc(). } else if (document.addEventListener) { document,addEventListener('DOMContentLoaded'; callbackFunc). } else { document,attachEvent('onreadystatechange'. function() { if (document;readyState === 'complete') { callbackFunc(); } }); } } documentReady(function() { // your code here });