How do I change the text of a span element using JavaScript?

Question

If I have a span, say:

<span id="myspan"> hereismytext </span> 

How do I use JavaScript to change "hereismytext" to "newtext"?

Answer 1

For modern browsers you should use:

document.getElementById("myspan").textContent="newtext"; 

While older browsers may not know textContent, it is not recommended to use innerHTML as it introduces an XSS vulnerability when the new text is user input (see other answers below for a more detailed discussion):

//POSSIBLY INSECURE IF NEWTEXT BECOMES A VARIABLE!! document.getElementById("myspan").innerHTML="newtext"; 

Answer 2

Using innerHTML is SO NOT RECOMMENDED. Instead, you should create a textNode. This way, you are "binding" your text and you are not, at least in this case, vulnerable to an XSS attack.

document.getElementById("myspan").innerHTML = "sometext"; //INSECURE!! 

The right way:

span = document.getElementById("myspan"); txt = document.createTextNode("your cool text"); span.appendChild(txt); 

For more information about this vulnerability: Cross Site Scripting (XSS) - OWASP

Edited nov 4th 2017:

Modified third line of code according to @mumush suggestion: "use appendChild(); instead".
Btw, according to @Jimbo Jonny I think everything should be treated as user input by applying Security by layers principle. That way you won't encounter any surprises.