我可以更改段落文本，同时保留段落中span元素的CSS(颜色)吗

Question

这是我试图更改的HTML，我试图保留标签中单词的颜色(CSS(-Paper和Rock。基本上，我想更改和

中的文本，并保留这两个标签的CSS(着色(。

HTML:

<div class="message">
<p><span id="result-user">Paper</span> beats <span id="result-comp">Rock</span>!You win!</p>
</div>

CSS：

#result-user{
color: rgb(246, 189, 76);
}
#result-comp{
color: rgb(246, 189, 76);
}

JavaScript:

let resultUserMessage_span = document.getElementById('result-user');
let resultCompMessage_span = document.getElementById('result-comp');
let resultMessage_p = document.querySelector('.message > p');
userChoice = "Rock";
compChoice = "Paper";
resultMessage_p.innerHTML = `${userChoice} loses to ${compChoice}!You lose!`;

Answer 1

在更改innerHTML时插入具有正确id的跨度

resultMessage_p.innerHTML = `<span id="result-user">${userChoice}</span> loses to <span id="result-comp">${compChoice}</span>! You lose!`;

Answer 2

在您的函数中，尝试

document.getElementById("p1").innerHTML = "<span id="result-user">${userChoice}</span> beats <span id="result-comp">${compChoice}</span>!You lose!";

Answer 3

对此的简单解决方案是用这样的span元素包装代码

resultMessage_p.innerHTML = `<span id="result-user">${userChoice}</span> loses to <span id="result-comp">${compChoice}</span> !You lose!`

更好的方法是模块化地处理你的答案，在答案的每个部分添加跨度，并根据"游戏"的状态更改内部HTML

<p>
<span id="result-user">Rock</span>
<span id="result-status"> loses to </span> 
<span id="result-comp">Paper</span>!
<span id="final-result"> You lose!</span>
</p>