Text color of just one letter in JavaScript

Question

Hi!
Can anyone help me with the following problem?

I want to change the color of single a letter depending on which letter it is.
My program (in which I want to implemend this feature) creates a DNA sequence which is mutating over several generations. Each generations sequence is shown.

You can find the program here:
https://code.sololearn.com/WXgnx5gJ365P/#js

As the sequence is created dynamically with javascript, I cannot use css to change the color of a single letter.
Is there a way to change the color of just one char in a string instead of changing the whole <p></p> paragraph?

I hope I could decently explain the problem I'm having...

Looking forward to your help! :)

Answer 1

You can use <span> inside the <p>
Add an class to span
Because span is an inline element, it won't change the look of your paragraph.
Because it has an class, you can stylish it using css.
Ex:

<p>This is an <span class="that">red</span> color</p>

<style>
.that{
color:red;
</style>

Answer 2

Also, you should add the "start" and "stop" DNA sequences.

Answer 3

Woohoo! It works! Finally! Thanks guys!
OK, that <span></span> - thing is worth remembering ;-)

Answer 4

Change your letter update to this:

$("#seq").append(`<span style="color: ${color}">${seq[i]}</span>`);