Wie iteriere ich über Span-Tags mithilfe einer for-Schleife in HTML/JavaScript?

Question

Wie komprimiere ich so viele Span-Tags? Ich versuche es so klein wie möglich zu machen. Jeder Rat wäre hilfreich, danke!

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

Deshalb möchte ich es haben. Jedes --i:Number erzeugt zu einem zufälligen Zeitpunkt ein Partikel.

Answer 1

如果您正在寻找一种更紧凑的方式来生成 HTML，那么以下内容也许会有帮助？

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

 cat