Handy DOM

<input id="a" type="number" />
<script>
  a.addEventListener("input", (e) => {
    console.log(typeof e.target.value); // string
    console.log(typeof e.target.valueAsNumber); // number
  });
</script>

<input id="d" type="date" />
<script>
  d.addEventListener("input", (e) => {
    console.log(e.target.value); // string
    console.log(e.target.valueAsDate); // object
  });
</script>

const real = document.querySelector("#ul");
const fragment = document.createDocumentFragment();
const letters = ["a", "b", "d"];
// Build our DOM nodes in memory.
letters.forEach((letter) => {
  const li = document.createElement("li");
  li.textContent = letter;
  li.classList.add(`list-item ${letter}`);
  fragment.appendChild(li);
});
// Append fragment "tree" all at once.
real.appendChild(fragment);