get text of Hidden <SPAN> in javascript

I have 4 <SPAN> ,out of which 3 are hidden (display:none) in dynamic gridview

<tr>
   <SPAN id="Span1">Name</SPAN>
   <SPAN id="Span2" style="display:none"></SPAN>
   Id1<开发者_StackOverflow中文版;SPAN id="Span3" style="display:none">Id2</SPAN>
   <SPAN id="Span3" style="display:none">Id3</SPAN>
</td>

How could I get the text of those? I am getting that element in alert as [object HtmlSpanElement]. I had written it using innerHtml & innerText but result undefined.

As requested by poster, and with thanks to V4Vendetta

The code to get the text content of a none is:

var content = span.innerText || span.textContent;

This works because (in general) those browsers that don't support innerText do support textContent. quirksmode has more detail.

Using JQuery, this would get the values:

$(function() {
   $('tr span').each(function() {
     alert($(this).text());
   });
});

Here's an example

USE:

var str = document.getElementById('span1').value;

Some browsers(Firefox) do not support innerText and would return undefined in such cases Read This

One more way would be to check textContent but then its not suppoerted in IE

So i would suggest you to try innerHTML and not innerHtml (you have to be careful of the case) and this should work in all the browsers.

Give your spans the Attribute runat="server" and access them like Span1.InnerHtml, Span2.InnerHtml, Span3.InnerHtml, etc. in CodeBehind. Or, considering that you get values from GridView, ((HtmlGenericControl)grid.rows[x].cells[y].FindControl("yourSpanId")).InnerHtml.

<script language="javascript" type="text/javascript"> 
 function MyFunction(){
     var gridview = document.getElementById('ctl00_ContentPlaceHolder1_gvmanageclients'); 
            var rCount = gridview.rows.length;
            alert(gridview.rows.length);
            var rowIndex=1;

            for (rowIndex; rowIndex<=rCount-1; rowIndex++)
            {
                var rowElement = gridview.rows[rowIndex];
                Cell = gridview.rows[rowIndex].cells[0];
                FirstControl = Cell.childNodes[0];
                alert(FirstControl.innerHTML);  

             }

  }
 </script>