Using Dom Tree structure instead of innerHTML

[CES]

All,
Visual Studio 2005 doesn't include an auto complete item for innerHTML document.getElementById("SomeID").innerHTML, is their a way of referencing the inner text of an element without using ???.innerHTML, that will work in all browsers.

The following works in Firefox (Win & Mac) but not in IE(Win) or Safari.

document.getElementById("SomeID").firstChild.nodeV alue = "XXX";

Thanks in advance. - CES

[Ivo]

"CES" <no**@none.comsaid

All,

One,

Visual Studio 2005 doesn't include an auto complete item for innerHTML
document.getElementById("SomeID").innerHTML, is their a way of referencing
the inner text of an element without using ???.innerHTML, that will work
in all browsers.
The following works in Firefox (Win & Mac) but not in IE(Win) or Safari.

document.getElementById("SomeID").firstChild.nodeV alue = "XXX";

It depends on what kind of node the firstChild is. IE is certainly capable
of setting text this way. A big difference between the browsers you mention
is their handling of whitespace textnodes: IE doesn't include textnodes with
only spaces, tabs and/or newlines in the DOM, so the first child is really
the second child to Firefox. Not sure if that 's causing your problem
without seeing more code I'm afraid. What errors occur? You certainly don't
need the innerHTML property.
Or perhaps somebody installed a toolbar in your IE which filters possibly
objectionable material, and all you need to do to make it work is feed a
different text.
hth
ivo

[RobG]

CES wrote:

All,
Visual Studio 2005 doesn't include an auto complete item for innerHTML
document.getElementById("SomeID").innerHTML, is their a way of
referencing the inner text of an element without using ???.innerHTML,
that will work in all browsers.

innerHTML is a property of an element, its value is as string. I suppose
the only 'logical' auto-complete would be string methods.

The W3C equivalent to innerText is textContent, but that it's not
supported by IE or older browsers - although most modern browsers do.
Probably the most widely supported method is to recurse down an
element's child nodes and grab the data property of text nodes.

But if innerText or textContent are supported, why not use them based on
feature detection? Try:

function getElText(el)
{
if (el.textContent) return el.textContent;
if (el.innerText) return el.innerText;
var x = el.childNodes;
var txt = '';
for (var i=0, len=x.length; i<len; ++i){
if (3 == x[i].nodeType) {
txt += x[i].data;
} else if (1 == x[i].nodeType){
txt += getElText(x[i]);
}
}
return txt.replace(/\s+/g,' ');
}

The following works in Firefox (Win & Mac) but not in IE(Win) or Safari.

document.getElementById("SomeID").firstChild.nodeV alue = "XXX";

It is not a good idea to guess what the firstChild (or any particular
node) will be unless you have complete control over the HTML. And even
then, it makes for brittle code.
--
Rob

[CES]

Ivo wrote:

"CES" <no**@none.comsaid

>All,

One,

>Visual Studio 2005 doesn't include an auto complete item for innerHTML
document.getElementById("SomeID").innerHTML, is their a way of referencing
the inner text of an element without using ???.innerHTML, that will work
in all browsers.
The following works in Firefox (Win & Mac) but not in IE(Win) or Safari.

document.getElementById("SomeID").firstChild.node Value = "XXX";

It depends on what kind of node the firstChild is. IE is certainly capable
of setting text this way. A big difference between the browsers you mention
is their handling of whitespace textnodes: IE doesn't include textnodes with
only spaces, tabs and/or newlines in the DOM, so the first child is really
the second child to Firefox. Not sure if that 's causing your problem
without seeing more code I'm afraid. What errors occur? You certainly don't
need the innerHTML property.
Or perhaps somebody installed a toolbar in your IE which filters possibly
objectionable material, and all you need to do to make it work is feed a
different text.
hth
ivo

ivo,
Thanks it's a whitespace issue... however I still have the same question, Is their a way of replicating what innerHTML does using the DOM Tree?
Just for future reference, how would you refer to an element with no whitespace such as:
<div id="SomeID"></div>
and same question with whitespace:
<div id="SomeID">
</div>
If you know of any Tutorials re: whitespace id be great full.
Thanks - CES
-

[Jeremy]

CES wrote:

All,
Visual Studio 2005 doesn't include an auto complete item for innerHTML
document.getElementById("SomeID").innerHTML, is their a way of
referencing the inner text of an element without using ???.innerHTML,
that will work in all browsers.

The following works in Firefox (Win & Mac) but not in IE(Win) or Safari.

document.getElementById("SomeID").firstChild.nodeV alue = "XXX";

Thanks in advance. - CES

I once wrote a function called "flatten" to do this - which would
basically recurse all children of a node and aggregate their contents,
returning plain text with no markup. I can't find the code, but it went
something like this:

//code starts here
function flatten(el)
{
if(el.nodeType == 3)
return el.nodeValue;

var result = "";

for(var i = 0; i < el.childNodes.length; i++)
result += flatten(el);

return result;
}

var text = flatten(document.getElementById("foo"));
alert("Here's an annoying alert box with the flat text: " + text);
//code ends here

Beware of trying this on a really complex fragment. Too much recursion
does not do a body good.

Jeremy

[Jeremy]

Jeremy wrote:

//code starts here
function flatten(el)
{
if(el.nodeType == 3)
return el.nodeValue;

var result = "";

for(var i = 0; i < el.childNodes.length; i++)
result += flatten(el);

return result;
}

var text = flatten(document.getElementById("foo"));
alert("Here's an annoying alert box with the flat text: " + text);
//code ends here

This is buggy.

Should be:
result += flatten(el.childNodes[i]);

Sorry.

Jeremy

[RobG]

CES wrote:

Ivo wrote:

"CES" <no**@none.comsaid

All,

One,

Visual Studio 2005 doesn't include an auto complete item for innerHTML
document.getElementById("SomeID").innerHTML, is their a way of referencing
the inner text of an element without using ???.innerHTML, that will work
in all browsers.
The following works in Firefox (Win & Mac) but not in IE(Win) or Safari.

document.getElementById("SomeID").firstChild.nodeV alue = "XXX";

It depends on what kind of node the firstChild is. IE is certainly capable
of setting text this way. A big difference between the browsers you mention
is their handling of whitespace textnodes: IE doesn't include textnodes with
only spaces, tabs and/or newlines in the DOM, so the first child is really
the second child to Firefox. Not sure if that 's causing your problem
without seeing more code I'm afraid. What errors occur? You certainly don't
need the innerHTML property.
Or perhaps somebody installed a toolbar in your IE which filters possibly
objectionable material, and all you need to do to make it work is feed a
different text.
hth
ivo

ivo,
Thanks it's a whitespace issue... however I still have the same question, Is their a way of replicating what innerHTML does using the DOM Tree?
Just for future reference, how would you refer to an element with no whitespace such as:
<div id="SomeID"></div>
and same question with whitespace:
<div id="SomeID">
</div>
If you know of any Tutorials re: whitespace id be great full.

Gecko browsers (Mozilla, Firefox, etc.) will collapse whitespace
according to the relevant W3C spec and may replace it with #text nodes,
see:

<URL:http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM>
I may have missed the point a bit in my response to your question
about:

document.getElementById("SomeID").firstChild.nodeV alue = "XXX";
If there is no firstChild, IE will error. e.g. if "SomeID" is like:

<div id="SomeID"></div>
Then there is no firstChild and IE errors. From memory, if the content
is only whitespace IE will collapse and remove it and so there still
won't be a firstChild. Put something "non-collapsible" in there and
you're OK:

<div id="SomeID">&nbsp;</div>
A general solution is to cleanout the contents, then write your own
textNode:

var el = document.getElementById("SomeID");
while (el.firstChild) {
el.removeChild(el.firstChild);
}
el.appendChild(document.createTextNode('blah'));
In this case, innerHTML seems much simpler. :-)

--
Rob