title: charAt not working on element created dynamically in javascript
body: <p>I am Making a name searching app in javascript. I have created all list items dynamically in javascript.</p>
  <p><strong><a href="https://jsfiddle.net/y14fw7ok/" rel="nofollow noreferrer">Js Fiddle</a></strong></p>
  <p>And when I use charAt(0) the app is not working nothing is displaying
  I want to match the first chracter of input and first character of array</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>names = ["Ayesha", "Alina", "Bilal", "Kaira", "Per", "Henry", "Liba", "Rimsha"]
  
  let ulEl = document.getElementById("ul-el")
  let searchInput = document.getElementById("searchInput");
  
  function render(things) {
    let listItems = ""
    for (let i = 0; i &lt; things.length; i++) {
      listItems += `
              &lt;li class="names"&gt;
                      ${things[i]}
              &lt;/li&gt;
          `
    }
    ulEl.innerHTML = listItems
  }
  
  render(names)
  
  searchInput.addEventListener("keyup", function(event) {
    let searchQuery = event.target.value.toLowerCase().charAt(0);
    let allNamesDOMCollection = document.getElementsByClassName('names');
  
    console.log(allNamesDOMCollection.textContent)
  
  
    console.log(allNamesDOMCollection.textContent)
    for (let i = 0; i &lt; allNamesDOMCollection.length; i++) {
      let currentName = allNamesDOMCollection[i].textContent.toLowerCase().charAt(0);
  
  
      if (currentName.includes(searchQuery)) {
        allNamesDOMCollection[i].style.display = "block";
      } else {
        allNamesDOMCollection[i].style.display = "none";
      }
  
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Search Names&lt;/h1&gt;
  
  &lt;div class="container"&gt;
    &lt;input type="text" id="searchInput" placeholder="Search"&gt;
  &lt;/div&gt;
  
  &lt;div class="container cont-modifier"&gt;
  
    &lt;ul id="ul-el"&gt;&lt;/ul&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>