How to for loop span tags in html/javascript?

Question

How can I condense this many span tags? I am trying to get it as small as possible. Any advice helps, thanks!

<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 am trying to get. Each --i:Number creates a particle at random times.

What do you mean by condence?

Konrad
– Konrad

2022-12-30 19:34:49 +00:00
Commented Dec 30, 2022 at 19:34 — Konrad
– Konrad, Commented Dec 30, 2022 at 19:34
can't you just have 1 span element and clone it?

Chris G
– Chris G

2022-12-30 19:36:01 +00:00
Commented Dec 30, 2022 at 19:36 — Chris G
– Chris G, Commented Dec 30, 2022 at 19:36
How are the spans currently generated?

imvain2
– imvain2

2022-12-30 19:41:53 +00:00
Commented Dec 30, 2022 at 19:41 — imvain2
– imvain2, Commented Dec 30, 2022 at 19:41

Carsten Massmann · Accepted Answer · 2022-12-30 20:19:16Z

1

In case you were looking for a more compact way of generating the HTML, then maybe the following is helpful?

const html=[...new Array(18)].map(_=>`<span style="--i:${Math.ceil(Math.random()*40+10)};"></span>`).join("\n");
console.log(html); // can be commented out ...
document.querySelector(".particle").innerHTML=html;

<header>
 <a href="#" class="loo">cat <i class="fa-d fa-ct"></i></a>
 <div class="particle"></div>
</header>

answered Dec 30, 2022 at 20:19

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zzz Over a year ago

You are the GOAT!!

Collectives™ on Stack Overflow

How to for loop span tags in html/javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related