innerHTML in Combination with parseFloat

What I'm attempting to do can be accomplished by the following...

elementContent = document.getElementById('docElement').innerHTML;
elementC开发者_如何学Pythonontent = parseFloat(elementContent);

or even by...

elementContent = parseFloat( document.getElementById('docElement').innerHTML );

but I can't help to wonder if there's a more elegant way to retrieve and assign DOM content as a float that I may be unaware of. Any insight?

There is the unary plus operator which tries to convert a string (or another type's toString()) to a number. It would be used like:

elementContent = +document.getElementById('docElement').innerHTML;

As others have mentioned you can use jQuery as essentially syntactic sugar for .innerHTML here, also.

That's a fine way to go about doing things. The only thing I could suggest would be that if you can avoid working with the HTML markup entirely, by storing the "clean" number as an attribute of the element, that would be preferable, as it would get around problems that might be introduced if the HTML gets fancier than you expect it to be. (For example, sometimes designers want negative numbers formatted with the Unicode "minus" glyph instead of the plain hyphen, because it looks better.)

Thus if you could generate your elements like this:

<span id='docElement' data-value='29.20221'>29.20221</span>

then instead of accessing the value as ".innerHTML" you'd use ".getAttribute()":

var value = document.getElementById('docElement').getAttribute('data-value');
value = parseFloat(value);

Use JQuery:

var html = parseFloat($('#docElement').html());
$('#docElement').html(html);

If you use a library such as jQuery the code for this would be more elegant, like so:

var el = parseFloat( $('#docElement').text() );

Don't forget you might run into an issue where you need to trim() the string as well.