How to iterate over span tags using for loop in HTML/JavaScript?

Question

How to compress so many span tags? I'm trying to make it as small as possible. Any advice would be helpful, thank you!

<header>
<a href="#" class="loo">cat <i class="fa-d fa-ct"></i></a>>
<div class="particle">
  <span style="--i:50;"></span>
  <span style="--i:21;"></span>
  <span style="--i:16;"></span>
  <span style="--i:18;"></span>
  <span style="--i:13;"></span>
  <span style="--i:22;"></span>
  <span style="--i:15;"></span>
  <span style="--i:24;"></span>
  <span style="--i:17;"></span>
  <span style="--i:28;"></span>
  <span style="--i:12;"></span>
  <span style="--i:26;"></span>
  <span style="--i:23;"></span>
  <span style="--i:13;"></span>
  <span style="--i:17;"></span>
  <span style="--i:11;"></span>
  <span style="--i:21;"></span>
  <span style="--i:16;"></span>
</div>
</div>

This is why I want to get it. Each --i:Number creates a particle at a random time.

Answer 1

If you're looking for a more compact way to generate HTML, maybe the following will help?

const html=[...new Array(18)].map(_=>``).join("\n");
console.log(html); // can be commented out ...
document.querySelector(".particle").innerHTML=html;

 cat