By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,619 Members | 1,643 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,619 IT Pros & Developers. It's quick & easy.

How to know span content???

P: n/a
I shoul want to know the content o a certain span:
************************************************** **********************

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
function return_span_value(){
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
}
</script>
<body>
<span id="x">Hello world!</span>
<input type="button" value="Click to know span value"
onClick="return_span_value();">
</body>
</html>

************************************************** **********************

It should return "Hello world!" doesn't it?

Any help appreciated.

Regards.

--
Fabri
(Non è tuttu oru chiddu chi stralluci, né tuttu veru chiddu ca si dici)
Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
*** Fabri wrote/escribió (Thu, 17 Mar 2005 10:03:56 +0100):
function return_span_value(){
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
}


Try:

alert(x.innerHTML);
--
-- Álvaro G. Vicario - Burgos, Spain
-- Don't e-mail me your questions, post them to the group
--
Jul 23 '05 #2

P: n/a
Fabri wrote:

[snip]
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
I assume you meant s.node<...>

[snip]
It should return "Hello world!" doesn't it?


No. The SPAN element itself doesn't contain the text; it has a child
text node and /that/ contains the text:

/* Check for getElementById support before using the method. */
if(document.getElementById) {
var s = document.getElementById('x'), tN;

/* Check that s is a valid reference, and that it
* has non-null object reference in firstChild.
*/
if(s && (tN = s.firstChild)) {
/* tN now references the text node within the SPAN.
* Displaying tN.nodeName should reveal '#text'.
*
* Both the data and nodeValue properties
* of a text node return the text within.
*/
alert(tN.data); // 'Hello world!'
}
}

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3

P: n/a
Michael Winter wrote:
alert(tN.data);


Also

alert(tN.nodeValue);

works.

Regards.

--
Fabri
(Non è tuttu oru chiddu chi stralluci, né tuttu veru chiddu ca si dici)
Jul 23 '05 #4

P: n/a
<snip>
both the data and nodeValue properties
* of a text node return the text within.
*/
and with that Michael would you be kind enough to explain the difference and
when to use one or the other? I find nothing definitive. TIA
jimbo


ael Winter Replace ".invalid" with ".uk" to reply by e-mail.

Jul 23 '05 #5

P: n/a
Fabri wrote:
I shoul want to know the content o a certain span:
************************************************** **********************
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<script type="text/javascript">
function return_span_value(){
var s = document.getElementById("x");
alert(x.nodeName);
alert(x.nodeValue);
}
</script>
<body>
<span id="x">Hello world!</span>
<input type="button" value="Click to know span value"
onClick="return_span_value();">
</body>
</html>

************************************************** **********************
It should return "Hello world!" doesn't it?

Any help appreciated.

Regards.

--
Fabri
(Non è tuttu oru chiddu chi stralluci, né tuttu veru chiddu ca si

dici)

For starters - don't put a <script> between <head> & <body> tags.

It may not be a good idea to make any assumptions about what may be
appended to that span - could be nested elements, could be whitespace
nodes...innerHTML will return rich content, but is non-standard. Here's
another possibility.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script type="text/javascript">

if (document.ELEMENT_NODE == null)
{
document.ELEMENT_NODE = 1;
document.TEXT_NODE = 3;
}

function normalizeString(s)
{
return s.replace(/\s\s+/g, " ").replace(/^\s*|\s*$/g, "");
}

function getTextValue(el)
{
var i;
var s = "";
for (i = 0; i < el.childNodes.length; i++)
if (el.childNodes[i].nodeType == document.TEXT_NODE)
s += el.childNodes[i].nodeValue;
else if (el.childNodes[i].nodeType == document.ELEMENT_NODE &&
el.childNodes[i].tagName == "BR")
s += " ";
else s += getTextValue(el.childNodes[i]);
return normalizeString(s);
}

function return_span_value(span_id)
{
var s = document.getElementById(span_id);
alert('span id: ' + s.id);
alert('span nodeName: ' + s.nodeName);
alert('s "text value": ' + getTextValue(s));
}

</script>
</head>
<body>
<span id="x1">Hello world!</span>
<input type="button" value="Click to know span value"
onClick="return_span_value('x1');">
<span id="x2"><a href="#null"><b>H</b>ello world!</a></span>
<input type="button" value="Click to know span value"
onClick="return_span_value('x2');">
</body>
</html>

//getTextValue courtesy Mike Hall
//http://www.brainjar.com/dhtml/tablesort/default4.asp

According to webreference:

The Document Object Model includes two relevant properties you can use:
data and nodeValue. You can use these properties to modify the content
of text nodes only. Both properties are set to the text node's value
and are fully interchangeable.

Jul 23 '05 #6

P: n/a
J. J. Cale wrote:
<snip>
* both the data and nodeValue properties
* of a text node return the text within.
*/


and with that Michael would you be kind enough to explain the difference and
when to use one or the other?


As far as I know, there isn't one. Both Node and CharacterData/Text
are fundamental interfaces (so they should be implemented by all
conforming user agents) and both data and nodeValue share the same
exception behaviour. Just pick which one you prefer. I use data
because it's unique and so it should be obvious (if not already) that
code is dealing with a text node.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.