Display huge text (partly colored)

Question

I am curently working on one visualization, using JavaScript, which should deal with large amount of text. In each sentence there are at least couple of words which I need to color, which means that a single sentence would look something like that:

"Word word word coloredWord word word coloredWord coloredWord word...".

Currently for each part without coloredWord I am creating a span element and appending a text node to it. And also each coloredWord is put in one span (I am using spans to be able to set classNames). However it takes too long to display it.

I have tried to use fragment and also to first set the div.style.display to "none" till all nodes are created. But I could not see any difference. Is there maybe another way how to display such a text where huge part of it needs to be colored in different colors?

Answer 1

As @monxas mentioned you could use spans inline like so

<p>Test test <span>colored</span> test test </p>

css

span{
    color:red;
}