Get Text Element

Question

I am a beginner. I am trying to pop up an alert box with the text contents of a <div>, but am getting null.

Javascript:

alert(document.getElementById("ticker").value);

HTML

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script src="Tick.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
            <div   id="ticker">
               Sample
            </div>
</asp:Content >

What am I doing wrong?

If you're just looking for text, I'd suggest looking at Element.innerText in IE and Element.textContent everywhere else. — user1385191
– user1385191, Commented Mar 26, 2011 at 18:20

Miquel · Accepted Answer · 2011-03-26 18:28:33Z

33

Try:

alert(document.getElementById("ticker").innerHTML);

Bear in mind however that the text inside a node is considered a child of that node, innerHTML will return all the HTML within that element.

It is explained here: http://www.quirksmode.org/dom/intro.html

If the text is the only child innerHTML will work fine

The following code is equivalent to use innerHTML for your sample:

alert(document.getElementById("ticker").firstChild.nodeValue);

it retrieves the value of the node of the first child of your div

edited Mar 26, 2011 at 18:28

answered Mar 26, 2011 at 18:20

Miquel

4,8493 gold badges22 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1385191 Over a year ago

See my comment on the question. innerText and textContent will grab text nodes inside the element.

carloswm85 Over a year ago

What if I want to grab just the text inside a div, and not any other HTML child element?

dekiss · Accepted Answer · 2013-10-04 17:12:18Z

8

innerHTML will give you all content that is inside the element including the HTML elements all all other nodes and text in them. If you want to get only the text that is directly in the element use nodeValue or text Content:

like this: text

var a = document.getElementById("id").childNodes[0].nodeValue;
var b = document.getElementById("id").childNodes[0].textContent;

This will get the text - "abc" and put it into variables a and b, they both will have "abc". Be careful with textContent however because textContent is not supported in Internet Explorer 8, nodeValue on other hand is in DOM1 which means very old browsers support it. And also if you are beginner maybe you don't know, but if you are executing javascript code right after browser open web page, then you have to link the javascript files on the bottom of your html code right before body closing tag, this is because if you try to get/set text for example for one element and if that element is not yet loaded by the browser you will get javascript error and your code will not function. This will happen if you link your javascript files or put your javascript code in the head of the page. Browsers read the page from top to bottom and as they read it they execute everything and place in the computer memory - RAM, this is called parsing. So if you put the javascript code before the content of the page is loaded, and if the javascript code tries to read or set some element that is not yet read by the browser you will get error.

edited Oct 4, 2013 at 17:12

answered Oct 4, 2013 at 15:29

dekiss

1051 silver badge3 bronze badges

1 Comment

carloswm85 Over a year ago

Please, add paragraphs to that long body text. It hurts reading it, and the information is good. It would be great if you added information about value

Jon Gauthier · Accepted Answer · 2011-03-26 18:17:44Z

5

Use innerHTML.

alert(document.getElementById('ticker').innerHTML);

Or even better, use jQuery's text():

alert($('#ticker').text());

answered Mar 26, 2011 at 18:17

Jon Gauthier

25.7k6 gold badges66 silver badges69 bronze badges

Comments

moe · Accepted Answer · 2011-03-26 18:17:53Z

1

alert(document.getElementById("ticker").innerHTML);

answered Mar 26, 2011 at 18:17

moe

30k4 gold badges21 silver badges16 bronze badges

Comments

user447356 · Accepted Answer · 2011-03-26 18:18:55Z

1

It won't be available until the document is loaded. Change the JS code to:

window.onload = function() {
   alert(document.getElementById("ticker").innerHTML);
}

answered Mar 26, 2011 at 18:18

user447356

Comments

Qasim · Accepted Answer · 2018-06-19 01:02:55Z

1

The problem with textContent is, it gives you the nested text inside other HTML elements too.

So I ended up getting the entire content as a string, and then got what I needed using substrings:

var contentString = "<h3>Jimmy John</h3> some text content that I need to get <span>...",
    startIndex = contentString.indexOf('</h3>') + 5; //indexOf gives index of '<', so incrementing
    endIndex = contentString.indexOf('<span>'),
    length = endIndex = startIndex;

var myText = contentString.substr(startIndex, length); //Voila

answered Jun 19, 2018 at 1:02

Qasim

1,5901 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

Get Text Element

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related