Set content of HTML <span> with Javascript

JavascriptDhtmlHtml

Javascript Problem Overview


In a webpage I am calling a WebService that gives me an integer value. I need to display this value in a block of text. I am currently using an HTML <span>.

So far, I've found two methods of putting my value in a span. innerText() is an IE proprietary way of doing it and innerHTML() is a non-standards compliant way, although widely supported.

What is the correct standards compliant way of setting the text between <span> and </span> from Javascript?

Javascript Solutions


Solution 1 - Javascript

With modern browsers, you can set the textContent property, see Node.textContent:

var span = document.getElementById("myspan");
span.textContent = "some text";

Solution 2 - Javascript

This is standards compliant and cross-browser safe.

Example: http://jsfiddle.net/kv9pw/

var span = document.getElementById('someID');

while( span.firstChild ) {
    span.removeChild( span.firstChild );
}
span.appendChild( document.createTextNode("some new content") );

Solution 3 - Javascript

To do it without using a JavaScript library such as jQuery, you'd do it like this:

var span = document.getElementById("myspan"),
    text = document.createTextNode(''+intValue);
span.innerHTML = ''; // clear existing
span.appendChild(text);

If you do want to use jQuery, it's just this:

$("#myspan").text(''+intValue);

Solution 4 - Javascript

The Maximally Standards Compliant way to do it is to create a text node containing the text you want and append it to the span (removing any currently extant text nodes).

The way I would actually do it is to use jQuery's .text().

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBrian BeckettView Question on Stackoverflow
Solution 1 - JavascriptrobinstView Answer on Stackoverflow
Solution 2 - Javascriptuser113716View Answer on Stackoverflow
Solution 3 - JavascriptBrian DonovanView Answer on Stackoverflow
Solution 4 - JavascriptchaosView Answer on Stackoverflow