[javascript] Set content of HTML <span> with Javascript

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?

This question is related to javascript dhtml html

The answer is


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);

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

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

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().


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to dhtml

Child element click event trigger the parent click event Change :hover CSS properties with JavaScript Modifying a query string without reloading the page Adding and removing style attribute from div with jquery Set content of HTML <span> with Javascript jQuery get the id/value of <li> element after click function Capture iframe load complete event How do I attach events to dynamic HTML elements with jQuery? How do I programmatically click on an element in JavaScript? Getting all selected checkboxes in an array

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment