How to change a color of a piece of text in jQuery?

Question

I use jQuery to change h1 header after end of a game and I have the following line of code:

$('h1').text(winningPlayer+" has won!").css("fontSize", "55px");

The question is, how can I set a different color just for winningPlayer part of text??

You'd have to put `winningPlayer` inside of an element you can then style, like `span` — Luca Kiebel, Mar 05 '19 at 15:24
Possible duplicate of [HTML: Changing colors of specific words in a string of text](https://stackoverflow.com/questions/4622808/html-changing-colors-of-specific-words-in-a-string-of-text) — Luca Kiebel, Mar 05 '19 at 15:24
@LucaKiebel: Before i posted my question I have read the answers for the question you linked. There was no answer for my question. The answer I got from Maheer Ali is perfect. — jbb, Mar 05 '19 at 15:44

score 6 · Accepted Answer · answered Mar 05 '19 at 15:25

Wrap the winningPlayer in <span> and change .text() to .html(). Below is the demo

let winningPlayer = "John"
$('h1').html(`<span style="color:blue">${winningPlayer}</span> has won!`).css("fontSize", "55px");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1></h1>

1 Answers1