1

I have this HTML code:

<div>
    756
    <span></span>
</div>

Using JavaScript I want to retrieve the number 756 from within the div tag and increment it by 1. What is the best method of filtering out the <span> from within the div tags so I get only the number?

4
  • The simplest way to do it is to place the number in another span and access the new span instead of the div with javascript
    – Ratzor
    Sep 19, 2012 at 12:50
  • 2
    use .innerText and then parseInt (don't forget the radix)
    – BLSully
    Sep 19, 2012 at 12:50
  • Is the structure shown always the same, and number always goes first in that div? Or you need more flexible solution?
    – raina77ow
    Sep 19, 2012 at 12:57
  • Sorry a bit late but posted an alternative that avoid the browser incompatibility. var theNum = parseInt(document.getElementById('someDiv').innerHTML.match(/\d+/), 10); alert(theNum+=1)
    – elmuchacho
    Sep 20, 2012 at 10:52

9 Answers 9

4

Try this:

var div = document.getElementsByTagName("div")[0],
    content = div.textContent || div.innerText;

textContent is supported by all browsers except IE8- and innerText is supported in all browsers except FF4-. So using both, you should get a stable result.

http://www.quirksmode.org/dom/w3c_html.html

Both properties return the text content with stripped HTML tags.

Example: http://jsfiddle.net/HnWxk/ (tested in chrome/ff/ie7)

Now, if you want to increment it, just do:

content++;

It should cast a Number: http://jsfiddle.net/HnWxk/3/

1
  • Most elegant solution :). Thank you!
    – cmplieger
    Sep 19, 2012 at 20:09
1

You can use .innerText to do so.

var div = document.getElementsByTagName("div")[0];

var inner;
if(div.innerText) {
   inner = div.innerText;
} else {
   inner = div.textContent;
}

var number = parseInt(inner);
number++;
alert(number);

Fiddle.

1
  • Just read here that indeed Firefox has problems with the ".innerText". Just updated the code to work with .textContent for Firefox.
    – MarcoK
    Sep 19, 2012 at 12:59
1
<div id="mydiv">
    756
    <span></span>
</div>

<script>
  var textNode = document.getElementById("mydiv").childNodes[0];
  var number = parseInt(textNode.nodeValue);
  textNode.nodeValue= number + 1;
</script>​

DEMO

1

Just an other way to do it without the browser incompatibility of innerText and textContent. I use innerHTML after I use a regular expression to extract the number, Also it is recommended to always define the radix when you use parseInt (will simply avoid some weird surprise I let you discover) and finally incrementing the value.

var theNum = parseInt(document.getElementById('someDiv').innerHTML.match(/\d+/), 10);
alert(theNum+=1)
0
0

The best solution would be to wrap the number in its own <span>. If that is not possible (you don't create the HTML code), you can iterate over all child nodes of the <div>. One of them will be the text node you want to target.

0
0
<div id="number">
    756
    <span></span>
</div>​


d = document.getElementById("number")
n = parseInt(d.innerHTML)+1;
alert(n)​;​
1
  • retracting. Sorry. Number(...) returns NaN, but parseInt(...) does return 756 Sep 19, 2012 at 12:59
0

Assuming this html code:

<div id="someDiv">
  756
  <span></span>
</div>

You can use this (with jquery):

var div = $("#someDiv");
div.text(parseInt(div.text()) + 1);
2
  • 1
    Or just div.text()+1. Also, jQuery was not tagged and your code will remove any HTML inside the container. Sep 19, 2012 at 13:25
  • The title simply says with "javascript" and the answer will be relevant if the title said with "jQuery" Sorry this is the reason why I voted the answer as not being useful
    – elmuchacho
    Sep 20, 2012 at 7:39
0

I used split on the text to get the number.
Also used jQuery to get the text, you can use the other methods people used here.

var divText = $('div').text();
var contentArray = divText.split('\n');       
var yay = parseInt(contentArray[1].trim(), 10);
alert(yay);
alert(yay++);

See fiddle here.

2
  • Assumes a newline in the sourcecode. Splitting by /\s?</ would be better. Sep 19, 2012 at 13:09
  • @JanDvorak You have to work with some kind of agreed format, I assumed his example represented that format. The regexp you offered is indeed better. 10x.
    – bldoron
    Sep 19, 2012 at 13:33
0

The best way would be wrap the number in an element, but you can workaround with this:

var div = document.getElementById('div')
var num = parseInt((div.innerText) ? div.innerText : div.textContent);
div.childNodes[0].nodeValue = num + 1;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.