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?

Answer 1

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

Answer 2

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.