6

I've got the following html:

<div class="question">
    <div class="text">
          Blah Blah
    </div>
</div>

I am trying to get the value "Blah Blah" using javascript.

So something like?

    alert(document.getElementsByName("question")[0].value);
PaperBirdMaster
  • 12,806
  • 9
  • 48
  • 94
Greg
  • 1,715
  • 5
  • 27
  • 36
  • possible duplicate of [Get the pure text without HTML element by javascript?](http://stackoverflow.com/questions/6743912/get-the-pure-text-without-html-element-by-javascript) - take a look at [this answer](http://stackoverflow.com/a/6743966/1456376) – insertusernamehere Nov 12 '13 at 14:06

10 Answers10

7
document.getElementsByClassName('question')[0].innerText;

or

document.querySelector('.question').innerText;
CD..
  • 72,281
  • 25
  • 154
  • 163
4

You can do it like this

alert(document.getElementsByClassName("question")[0].children[0].innerHTML);
Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
3

You need to select the element correctly first. It doesn't (and can't) have a name attribute so getElementsByName is wrong. You can use getElementsByClassName or (with more limited support) the new and shiny querySelector:

var div = document.querySelector('.question');

Then you need to get it's "value". It isn't a form control so it doesn't have a value property. It has childNodes, the one of which you care about is another div.

var childDiv = div.querySelector('.text');

You can skip the two stages if you are are using querySelector and just use a descendant combinator:

var childDiv = document.querySelector('.question .text');

This child div then has another child node, but it is a text node rather than an element node. You can get it like so:

var textNode = div.firstChild;

Finally you can get the text in a textNode using the data property.

var text = textNode.data;

And if you put it all together:

alert(document.querySelector('.question .text').firstChild.data);

Such: http://jsfiddle.net/LR93S/

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
2

No need to rely on jQuery here, use innerText

document.querySelectorAll('div.question')[0].innerText
epoch
  • 16,396
  • 4
  • 43
  • 71
1
 $('.question').text(); // jquery

 document.getElementsByClassName("question")[0].innerText; // javascript
Krish R
  • 22,583
  • 7
  • 50
  • 59
1

Try this: document.getElementsByClassName("text")[0].innerHTML (http://jsfiddle.net/hv9Dx/15/)

pax162
  • 4,735
  • 2
  • 22
  • 28
1

The simplest way to do this is with jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
var divvalue = $('.text').html()
alert (divvalue);

You could also change your html to use an ID

<div class="question">
<div id="text">
      Blah Blah
</div>
</div>

and use:

document.getElementById("text").innerHTML;

Example: http://jsfiddle.net/DanBrown180/N9Z8Z/

Dan Brown
  • 1,515
  • 1
  • 9
  • 13
1
document.querySelectorAll('.text')[0].innerHTML
piscript
  • 419
  • 5
  • 8
1

Use the standard DOM property textContent, which is widely supported and standardized, unlike innerText:

document.getElementsByClassName("question")[0].textContent;

If you need to support IE <= 8 then you've got two problems: neither document.getElementsByClassName() nor textContent is supported.

For the first issue, it's not too hard to write/find a function to retrieve elements by class name using other DOM methods (example).

For the second, you can use IE's innerText property, which will do roughly (but not precisely) the same thing as textContent.

Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536
0

For the following example:

<div class="question" id="question">
    <div class="text" id="text">
      Blah Blah
    </div>
</div>

You can try to get the value of its inner div tag like this:

alert(document.getElementById('question').childNodes[1].innerHTML);

Cheers!

William Damian
  • 1
  • 3