Add to innerHTML with value

Question

Based off this thread: Using a CSS Stylesheet with Javascript .innerHTML

To stylize a innerHTML such as this:

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

all you need to is this:

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

But what If I have a value? How would I apply the tag to this:

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

Does this do what you want? `document.getElementById('pText').innerHTML = "You clicked: " + value + "";` — Nicholas Tower, Sep 12 '17 at 02:16

Bricky · Accepted Answer · 2017-09-12T02:25:10.350

1

innerHTML is a string that's converted to / interpreted as HTML, so as long as you add the tags around your value, it'll work:

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

Alternatively, you could add the span to your HTML directly, and set the innerHTML of the span to be "You clicked :" + value in your JS, which is a bit cleaner.

edited Sep 12 '17 at 02:25

answered Sep 12 '17 at 02:17

Bricky

2,572
14
30

add some explanation instead of just a line of code – Se0ng11 Sep 12 '17 at 02:19
an explanation was added and this seemed to work. thanks! – Enkrypton Sep 12 '17 at 02:24

score 0 · Answer 2 · answered Sep 12 '17 at 02:26

0

As InnerHtml is a string here i append the value which is got from the click event it works.

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>

answered Sep 12 '17 at 02:26

Jino Shaji

1,097
14
27

Is this is the way that you want to work? Is this is the output you need? – Jino Shaji Sep 12 '17 at 02:27

Add to innerHTML with value

2 Answers2