Set HTML <span> Content Using Javascript

Question

On the webpage, I call WebService, which gives me an integer value. I need to display this value in a block of text. I am currently using HTML <span> .

So far, I have found two methods for entering my value in between. innerText() is a proprietary way of IE, and innerHTML() is a non-standard way, although it is widely supported.

What is the correct way to match text between <span> and </span> from Javascript?

Answer 1

It is a standards compliant and cross browser.

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

 var span = document.getElementById('someID'); while( span.firstChild ) { span.removeChild( span.firstChild ); } span.appendChild( document.createTextNode("some new content") ); 

Answer 2

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

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

Answer 3

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

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

If you want to use jQuery, this is simple:

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

Answer 4

The most appropriate way to standards is to create a text node containing the desired text and add it to the range (delete any existing existing text nodes).

How I would do this is to use jQuery .text() .