javascript - What would be the least burden for laying out 100000 text spans as individual elements to CLIENT

Question

I'm thinking of layout about a hundred thousand text spans which react to a callback function like the link below.

https://codepen.io/jotnajoa/pen/RwGmOzG

for(let i=0; i<100000;i++){
  spans.push(i)
};


spans.forEach((d,i)=>{
  $('.container').append(`<span class='spans ${i}'>${Math.floor(Math.random()*100)}</span>`)
})

What I try to achieve eventually is

among the text element I laid out, highlight specific text which falls into a category I set like 'highlight' texts which meets a certain criteria once I click the button at the bottom.

I tried out briefly by making thousands of 'span's.

I also think of canvas using p5js or just text element in svg using d3 or just using vanialla JavaScript/jQuery in the example I posted above.

However, I'm bit worried of crashing my computer down once the number of element I create reaches to a very big number.

Performance-wise, what would be the most efficient way of making element which could react to a call back function later on?

I guess canvas but if I use canvas, I need to create hundreds thousands of object created by class which sounds quite intimidating.

For now, only option I could think of is <span>.

Any suggestion?

question from:https://stackoverflow.com/questions/65866688/what-would-be-the-least-burden-for-laying-out-100000-text-spans-as-individual-el

Answer 1

Waitting for answers