使用值将<span>添加到innerHTML

Question

基于此主题：Using a CSS Stylesheet with Javascript .innerHTML

要对诸如此类的innerHTML进行样式化：

document.getElementById("ID").innerHTML = "This is your error";

你需要的只是：

document.getElementById('error-message').innerHTML = "<span class='error'>my 
error</span>";

但如果我有价值呢？我如何将标签应用于此：

document.getElementById('pText').innerHTML = "You clicked: " + value;

Answer 1

innerHTML是一个字符串，它被转换为/解释为HTML，因此只要您在值周围添加标记，它就会起作用：

document.getElementById('pText').innerHTML = "<span>You clicked: " + value + "</span>";

或者，你可以直接在你的HTML中添加span，并在你的JS中将span的innerHTML设置为"You clicked :" + value，这样会更清晰。

Answer 2

由于InnerHtml是一个字符串，我附加了从它工作的点击事件中获得的值。

function pClicked(value){
 document.getElementById('pText').innerHTML = "<span class='error'>You Clicked "+value+"</span>";
}

.error {
  color: red;
  font-size: 24px;
}

<div id="pClicked" onClick="pClicked('pClicked Div')">Click here</div>

<div id="pText"></div>