How do I color separate words that are in quotation marks

Issue

I am making a shop, and I made a "Colors available" part, but I want to be able to color separate words with different colors, in Javascript, css, or HTML, or however it is possible

<button onclick="getColors()">Colors Available</button>
<script>

    function getColors(){
        if(!document.getElementById('colors_ava')){
            let colors_ava = document.createElement('div');
            colors_ava.id = 'colors_ava';
            document.body.appendChild(colors_ava);
            colors_ava.innerText = "Rich Navy  -  True Red  -  Dark Geen  -  Olive Drab Green  -  Patriot Blue";
        }
    }
</script>

Solution

You can have util method to create span with style.

function getColors() {
  function createSpan(str, color) {
    const span = document.createElement("span");
    span.style.color = color;
    span.style.marginRight = "20px";
    span.textContent = str;
    return span;
  }
  if (!document.getElementById("colors_ava")) {
    let colors_ava = document.createElement("div");
    colors_ava.id = "colors_ava";
    document.body.appendChild(colors_ava);
    colors_ava.append(createSpan("Red color - ", "red"));
    colors_ava.append(createSpan("Blue color - ", "blue"));
    // colors_ava.innerText = "Rich Navy  -  True Red  -  Dark Geen  -  Olive Drab Green  -  Patriot Blue";
  }
}

<button onclick="getColors()">Colors Available</button>

Answered By – Siva K V

Answer Checked By – Willingham (AngularFixing Volunteer)