How to manipulate an HTML element created by Template literals?

Question

Does anyone know why when you create an HTML component using Template literals it always returns null? ex: I created a list and I want to take the li to put an event, but always returns null, since it exists in DOM.

const $container = doc.querySelector('[data-js="container"]');
const $categorie = doc.querySelectorAll('[data-js="categorie"] li');

 const markup = `
    <ul data-js='categorie'>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
 `;

 $container.innerHTML = markup;

Answer 1

Your problem is in the order of execution, you must perform the search for the elements, after they are created in the GIFT, put that line:

const $categorie = doc.querySelectorAll('[data-js="categorie"] li');

Below this:

$container.innerHTML = markup;

Example

const doc = document;
const $container = doc.querySelector('[data-js="container"]');

const markup = `
    <ul data-js='categorie'>
      <li>item 01</li>
      <li>item 02</li>
      <li>item 03</li>
    </ul>
`;

$container.innerHTML = markup;

const $categorie = doc.querySelectorAll('[data-js="categorie"] li');

Array.from($categorie).forEach(item => {
    item.addEventListener('click', function(event) {
        alert("Você clicou em: " + this.innerText);
    });
});

<div data-js="container"></div>